How to Validate Form using jQuery and Ajax

How to Validate Form using jQuery and Ajax

An important aspect that gives more professionalism to our websites live validation of the forms. The validation can be performed on the server after sending the data or client before sending.

In this article we will see how to validate a form on the client before sending the data using jQuery Validation and process them through the Ajax technique.

To validate a form with jQuery Validate we add in the <body> of our HTML page a simple form such as the following:

<Form method = "post" id = "formid">
    <div id = "formsub"> </ div>
    <p> <span> Name </ span>
    <input type = "text" name = "name" id = "name" /> </ p>
    <p> <span> Surnames </ span>
    <input type = "text" name = "lastname" id = "lastname" /> </ p>
    <p> <span> Email </ span>
    <input type = "text" name = "email" id = "email" /> </ p>
    <p> <span> Phone </ span>
    <input type = "text" name = "phone" id = "phone" /> </ p>
    <p> <span> Age </ span>
    <input type = "text" name = "years" id = "years" /> </ p>
    <p> <span> Message </ span>
    <textarea id = "message" name = "message" rows = "5" cols = "53"> </ textarea> </ p>

    <input type = "submit" value = "Submit" style = "margin-left: 565px;" />
</ Form>

It is a simple form with your inputs: full name, email, phone, age and message, has its submit button type and a container id = “formsub” where we deposit using the technique Ajax PHP response file.

Within the <head> tag, we must include the jQuery library, the jQuery Validate plugin and its call + the necessary styles that each one of them will handle to the web that is being designed.

<script src = "jquery-1.4.2.min.js" type = "text / javascript"> </ script>
<script src = "jquery.validate.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
$ (document) .ready (function () {
    $ ( "# formsub") hide ().;

    $ ( "# formID"). Validate ({
        rules: {
            name: {required: true, minLength: 2},
            lastname: {required: true, minLength: 2},
            email: {required: true, email: true},
            phone: {minLength: 2, maxlength: 15},
            years: {required: true},
            message: {required: true, minLength: 2}
        },
        messages: {
            name: "You must enter your name."
            lastname: "You must enter your name."
            email: "You must enter a valid email address."
            phone: "The phone number entered is not correct."
            years: "You must enter only numbers."
            message: "The message field is required."
        },
        submitHandler: function (form) {
            datastring var = 'name =' + $ ( '# name') val () + '& lastname =' + $ ( '# lastname') val () + '...'..;
            $ .ajax ({
                type: "POST"
                url: "send.php"
                data: datastring,
                success: function (data) {
                    $ ( "# formsub") html (data).;
                    $ ( "# formsub") show ().;
                    $ ( "# formid") hide ().;
                }
            });
        }
    });
});
</ Script>

In the above code we have to fix especially in the call to validate () function.We are indicating that when you press the button on the form with id = “formid” establish standards for each field such as the name field required and at least 2 characters. Then also we add error messages for each field and finally with submitHandler add the code that will process the form if everything meets the established standards.

You can find more documentation jQuery Validate to see for example that rules can be added to the fields.

Ajax code does is receive the form data and build a string that contains them to pass through the POST method to the PHP file.

The shipping confirmation message is returned from the PHP file and is captured in the success of Ajax where we are depositing the message in the container confirmation is initially hidden making it visible and hiding the form.

Now only you lack create a PHP file that will call “send.php” that will process the data either by entering them into a database, saving them in a file or sending them by email. In the example shown running only an outgoing message.

<? Php
echo 'Thank you'. $ _ POST [ 'name']. ' '. $ _ POST [' lastname '].'. The information has been sent correctly ';
?>
Lucid Kit

Related Posts
Leave a reply
Captcha Click on image to update the captcha .