CODEWITHSUNDEEP
javascriptphpjqueryhtml
user5381054
user5381054

Reputation:

How to send an ajax validation only if jQuery validation plugin succeed?

I used jQuery validation plugin to validate form fields. Now I want to send an ajax request only if the fields are valid, which means after jQuery validation plugin succeed.

JavaScript: 

$(function(){
   $("#form").validate({
       errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
        },
        wrapper: 'span',
       
       rules: {
           email: {
               required: true,
               email: true
           },
           name: {
               required: true,
               minlength: 5
           },
           password: {
               required: true,
               minlength: 6
           },
           rePassword:{
               required: true,
               minlength: 6,
               equalTo: "#password"
           },
           birthDate:{
               required: true
           },
           aboutYou:{
               required: true
           }
           
       },
       messages:{
           email: {
               required: "this field is required!",
               email: "please enter a valid email!"
           },
           name:{
               required: "this field is required!",
               minlength: "name needs to have at least 5 chars!"
           },
           password:{
               required: "password is required!",
               minlength: "password needs to have at least 6 chars!"
           },
           rePassword:{
               required: "rePassword is required!",
               minlength: "rePassword needs to have at least 6 chars!",
               equalTo: "passwords don't match!"
           }
       }
   }); 
});
<!DOCTYPE html>
<html>
    <head>
        <title>Register</title>
        <meta charset="utf-8">
        <script src="includes/jquery-1.11.3.js"></script>
        <link rel="stylesheet" type="text/css" href="css/css.css">
        <script src="js/jquery.validate.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/registerForm.js"></script>
        <?php 
            require_once'includes/DAL.php';
        ?>
        <script>
           $(function(){
                $( "#form" ).submit(function(){
                    // run this code only if validation plugin succeed?
                    $.ajax({
                        method: "post",
                        url: "API.php", 
                        data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
                        success: function(result){$("#div1").html(result);
                    }});
                });
            });
        </script>
    </head>
    <body>
        <form method="post" id="form">
            <label>Email</label><br/>
            <input type="text" name="email" id="email" placeholder="Enter your email"/><br/>

            <label>Name</label><br/>
            <input type="text" name="name" id="name" placeholder="Enter your name"/><br/>

            <label>Password</label><br/>
            <input type="password" name="password" id="password" placeholder="Enter your password"/><br/>

            <label>re-Password</label><br/>
            <input type="password" name="rePassword" id="rePassword" placeholder="Repeat password"/><br/>

            <label>Birth Date</label><br/>
            <input type="date" name="birthDate" id="birthDate"/><br/>

            <label>About yourself</label><br/>
            <textarea name="aboutYou" id="aboutYou" placeholder="About yourself..."></textarea>

            <input type="submit" id="submit" value="Register!"/>
            <div id="div1"></div>
        </form>
    </body>
</html>

Upvotes: 1

Views: 1245

Answers (2)

Christof
Christof

Reputation: 2734

Append function(errors, event) to your initail validator plugin script.

$(function(){
   $("#form").validate({
       errorPlacement: function(label, element) {
        label.addClass('arrow');
        label.insertAfter(element);
        },
        wrapper: 'span',

       rules: {
           email: {
               required: true,
               email: true
           },
           name: {
               required: true,
               minlength: 5
           },
           password: {
               required: true,
               minlength: 6
           },
           rePassword:{
               required: true,
               minlength: 6,
               equalTo: "#password"
           },
           birthDate:{
               required: true
           },
           aboutYou:{
               required: true
           }

       },
       messages:{
           email: {
               required: "this field is required!",
               email: "please enter a valid email!"
           },
           name:{
               required: "this field is required!",
               minlength: "name needs to have at least 5 chars!"
           },
           password:{
               required: "password is required!",
               minlength: "password needs to have at least 6 chars!"
           },
           rePassword:{
               required: "rePassword is required!",
               minlength: "rePassword needs to have at least 6 chars!",
               equalTo: "passwords don't match!"
           }
       },
       function(errors, event) {
           if (!errors.length) _submit();
       }

   }); 
});



function _submit() {
    $( "#form" ).submit(function(){
        $.ajax({
            method: "post",
            url: "API.php", 
            data:{email: $("#email").val(), name: $("#name").val(), password: $("#password").val(), rePassword: $("#rePassword").val(), birthDate: $("#birthDate").val(), aboutYou: $("#aboutYou").val()},
            success: function(result){$("#div1").html(result);
         }});
     });
}

Upvotes: 0

alcedo
alcedo

Reputation: 1672

im guessing you are using the following plugin: http://jqueryvalidation.org/documentation/

And what you are looking for is probably this:

submitHandler (default: native form submit)
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

So you can do something like this

$(".selector").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit();
  }
});

API docs: http://jqueryvalidation.org/validate

======================

If that's not the plugin that you are using, look for something like this:

"Callback for handling the actual submit when the form is valid." in the plugin API docs. It's definitely gonna be implemented as a callback or a promise object.

Upvotes: 2

Related Questions