both ajax and jquery validation plugin not working at same time

Question

this is my code i want to validate all user fileds then insert data into database but in this if i put validation code and ajax code simultaneously then it is not working but individually both codes working good. if i comment out ajax code then validation code working fine and vice versa

<script>


//validation
    $(document).ready(function () {

//toatsr success
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
//toatr
//error toster
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
//error toaster

// Setup form validation on the #register-form element
        $("#contactus_form").validate({

            // Specify the validation rules
            rules: {
                name: "required",
                contact: "required",
                degree: "required",
                applying_for: "required",
                experience: "required",
                user_cv: "required",
                email: {
                    required: true,
                    email: true
                }


            },

            // Specify the validation error messages
            messages: {
                name: "Please enter your first name",
                contact: "Please enter your contact number",
                degree: "Please enter your Qualification",
                experience: "Please enter your experience",
                user_cv: "Please select Your Cv",
                applying_for: "Please accept our policy",
                email: "Please enter a valid email address"

            },

            submitHandler: function (form) {
                form.ajaxsubmit();
            }
            //  alert("alert");
        });


        $("#submit").click(function () {
//alert("alert");
            var name = $("#name").val();
            var email = $("#email").val();
//var password = $("#password").val();
            var contact = $("#contact").val();
            var applying_for = $("#applying_for").val();

            var degree = $("#degree").val();
            var experience = $("#experience").val();
//var user_cv = $("#user_cv").val();
//form data

            var form_data = new FormData();
            var file_data = $('#user_cv').prop('files')[0];  // here pic is the id of input type image
            form_data.append('user_cv', file_data);
            //
            form_data.append('name1', name);
            form_data.append('email1', email);
            form_data.append('contact', contact);
            form_data.append('degree', degree);
            form_data.append('applying_for', applying_for);
            form_data.append('experience', experience);


//var password = $("#password").val();
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'name1='+ name + '&email1='+ email  + '&contact='+ contact+ '&degree='+ degree+ '&applying_for='+ applying_for+ '&user_cv='+ user_cv+ '&experience='+ experience;
            if (name == '' || email == '' || applying_for == '' || contact == '' || experience == '')
            {
//alert("Please Fill All Fields");
                toastr["warning"]("All Fields are required.")
            } else
            {
// AJAX Code To Submit Form.
                $.ajax({
                    type: "POST",
                    url: "ajaxsubmit.php",
                    enctype: 'multipart/form-data',
                    data: form_data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {
                        $('#myModal').modal('hide');

                        toastr["success"]("Your submission has been sent successfully.", "Success")
                        $("form").trigger("reset");
//alert(result);
                    }
                });
            }
            return false;
        });
    });
</script>

<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data">
    <div class="form-group">
        <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'">
    </div>
    <div class="form-group">
        <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'">
    </div>
    <div class="form-group">
        <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'">
    </div>
    <div class="form-group">
    <!--   <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'">
        -->
        <select id="degree" name="degree"   class="form-control">
            <option value="Highest Degree ">Highest Degree </option>
            <option value="Highest Degree ">Highest Degree </option>
        </select>
    </div>
    <div class="form-group">
        <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'">
    </div>
    <div class="form-group">
        <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'">
    </div>
    <div class="form-group">
        <div class="field">
            <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6"  />
            <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span>
                <strong class="browse-btn butn">Browse</strong></label>
        </div>

    </div>
    <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button>
</form>

What exactly do you mean by 'not working'? What does happen? Are there any error messages? — DaveP
– DaveP, Commented Jun 30, 2017 at 11:34
You should put AJAX code inside submitHandler in validate function — Pankaj Makwana
– Pankaj Makwana, Commented Jun 30, 2017 at 11:35
no there is no error but when i try to submit it relod the page and not validating form and not submiting data into database — shubham yadav
– shubham yadav, Commented Jun 30, 2017 at 11:35
"not submiting data into database" - so, nothing to do with any of the code you've posted here as that's server-side. — fdomn-m
– fdomn-m, Commented Jun 30, 2017 at 11:36

Mayank Pandeyz · Accepted Answer · 2017-06-30 11:38:02Z

1

The best way to use validation and ajax() is:

$('#formId').validate({
    rules:{
        // rules here
    },
    messages:{
        // messages here
    }
});

hold the form sumbit

$('#formId').submit(function(e){
    e.preventDefault();
});

Initiate validation check on submit button click

$('#btn').click(function(){
    if( $('#formId').valid() )
    {
        // ajax call here
    }
});

answered Jun 30, 2017 at 11:38

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayank Pandeyz Over a year ago

That's great, follow this approach, it works every time.And I know, you will manage it, that's why I don't replied on your first comment.

Collectives™ on Stack Overflow

both ajax and jquery validation plugin not working at same time

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related