Question

这是我的代码我想验证所有用户文件然后将数据插入数据库但是如果我同时放置验证代码和ajax代码然后它不起作用但是单独两个代码都运行良好。如果我注释掉ajax代码，那么验证代码工作正常，反之亦然

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

Answer 1

使用validation和ajax()的最佳方式是：

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

保存表单sumbit

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

启动验证检查提交按钮单击

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

ajax和jquery验证插件都不能同时工作

1 个答案: