Tuesday, 15 January 2013

Jquery Simple Form Validation | PHP Tutorial for beginners

In this tutorial of php code for beginners we will look at jquery form validation with example.


<html>
<head>
<title>JQuery Form Validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#form1").validate({
         debug: false,
   rules: {
    name: "required",
    dropdown: "required",
    email: {
     required: true,
     email: true
    }
   },
   messages: {
    name: "Please enter your good name.",
    email: "Please enter your valid email address.",
    dropdown: "Please select option from dropdown list.",
   },
   submitHandler: function(form) {
 
    $.post('nextstep.php', $("#form1").serialize(), function(data) {
     $('#result').html(data);
    });
   }
  });
 });
</script>
<style>
 label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<form name="form1" id="form1" action="" method="POST">
    <label for="name" id="name_label">Name</label>
    <input type="text" name="name" id="name" size="30" value=""/>
 <br>
    <label for="email" id="email_label">Email</label>
    <input type="text" name="email" id="email" size="30" value=""/>
<br>
 Please Select the City:
<select name="dropdown" id="dropdown">
<option value="">None</option>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
<option value="pune">Pune</option>
</select>
 <br>
 <input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="result"><div>
</body>
</html>


Hope this php tutorial is useful for you. Keep following www.phpcodeforbeginner.blogspot.in for more help.

20 comments:

  1. How do you check for an integer? numer:true and digit true allow decimals

    ReplyDelete
    Replies
    1. To check integer validation you can use
      rules: {
      age: {
      required: true,
      number: true
      }
      }
      // Where age is name of your textbox

      Delete
  2. how to validate drop drow list

    ReplyDelete
    Replies
    1. I have updated the code to also validate drop-down list...

      Delete
  3. thanks..code is very simple and easy to understand...

    ReplyDelete
  4. great!!! thank u

    ReplyDelete
  5. hi there awesome bit of code, and very easy to adapt but im trying to make it "check if a checkbox is ticked" at the end of the form.

    just like agreeing to terms and condtions,

    could you help?

    ReplyDelete
    Replies
    1. I have already put an article for checking the multiple checkboxes using jquery. Here is the link for that
      Checkbox validation using jquery

      Delete
    2. To check "CHECKBOX" validation you can add name of checkbox on rule field and appropriate message in message field in above code.
      Here is an example:-
      rules: {
      name: "required",
      dropdown: "required",
      checkbox_name:"required",
      }
      messages: {
      name: "Please enter your good name.",
      email: "Please enter your valid email address.",
      dropdown: "Please select option from dropdown list.",
      checkbox_name: "Please select checkbox field.",
      },

      Delete
  6. thank you that worked a charm, just one last issue with this validation script, it loads the next step under the form but i need it to redirect to a fresh page in its self

    $.post('nextstep.php', $("#form1").serialize(), function(data) {
    $('#result').html(data);

    what do i edit here?

    ReplyDelete
    Replies
    1. You can remove the below code and put action page in your form.

      ,submitHandler: function(form) {

      $.post('jqueryvalidation.php', $("#form1").serialize(), function(data) {
      $('#result').html(data);
      });
      }

      Delete
    2. the code work nice .i want to show the result on another page this code show the result on same page after the form code

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Hi,

    $(document).ready(function(){
    $("#zipform").validate({
    debug: false,
    rules: {

    dropdown: "required",

    zipcode: {
    required: true,
    number: true
    },


    email: {
    required: true,
    email: true
    }
    },
    messages: {
    zipcode: "Please enter your ZIP code.",
    email: "Please enter your valid email address.",
    dropdown: "Please select option from dropdown list.",
    },

    });
    });


    This is my code working fine, but i want ...

    zipcode: {
    required: true,
    number: true
    },
    If zipcode is blank, its showing message
    zipcode: "Please enter your ZIP code.",

    but if it is Alphabetic character then it should say, fill numbers.....!

    How i can do that ?

    Thanks,
    Arvind

    ReplyDelete
  9. Godd information about email validation..,
    keep blogging.

    ReplyDelete
    Replies
    1. you does it well i have tried it add this to your code messages:{


      zipcode:{
      required: "Please enter your ZIP code.",
      number: " fill numbers.....!"
      },

      }

      Delete
  10. how to required field than contains + and numbers only?

    ReplyDelete
  11. Is it possible to give minimal characters and/or maximum number of characters?

    ReplyDelete