jquery validation plugin and submitHandler

问题

I have a form that is using jQuery validation and is also making ajax calls to a database via php to display information after the first select, and then after submit.

This is as close as I can get it to working. The only remaining problem is that the form will allow the user to submit it when there are validation errors that should be corrected.

I believe the submitHandler is the key to making it work, but any code I have tried where I comment //tried various things here has caused various different problems.

Here is the code for the page:

<html>
<head>
<script src="../../jquery_theme/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dist/jquery.validate.js"></script>

<script>
$(document).ready(function(){
$("#commentForm").validate({
    submitHandler: function(form) {
        //tried various things here
        }
    });
 });

</script>

</head>
<body>


<form class="cmxform" id="commentForm"  >
<fieldset>

 <p> <label for="select_part">Select Part to Adjust Count</label></p>  

          <div>  <select name="id_part" id="select_part" class="required" >
                <option value="">---</option>
                <option value="1">option1</option>
                <option value="2">option2</option>

            </select>

                <div id="returnedValue" class="ajaxReturn"></div>
            </div>
                <br />

 <p>
 <label for="cname">Name</label>
 <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
 </p>
 <input id="submitForm" class="submit" type="submit" value="Submit"/>
 </p>
 </fieldset>
 </form>
 <p><div id="returns"></div></p>
 <script type="text/javascript" src="validateTestDB.js"></script>
 </body>
 </html>

Here is the javascript that feeds info back to the page:

$('#select_part').change(function(){
var select_part = $('#select_part').val();


$.post('../../php/getCounts.php', { select_part: select_part}, function(data){
$('#returnedValue').hide().html(data).fadeIn(1200);


      });
   });

 $('#submitForm').click(function(){


var select_part = $('#select_part').val();
var name = $('#cname').val();
$.post('validateResult.php', {select_part: select_part, name: name}, function (data3){
    $('#returns').html(data3);
     });

});

I've been reading and trying things for two days, and I'm just stuck.

回答1:

You have a click handler, $('#submitForm').click(), that is interfering with the submitHandler: inside the validation code. This is redundant and the .click() handler should be removed in favor of the submitHandler:. The desired code should then be placed inside the submitHandler, something like this...

$(document).ready(function(){
    $("#commentForm").validate({
        submitHandler: function(form) {
            var select_part = $('#select_part').val();
            var name = $('#cname').val();
            $.post('validateResult.php', {select_part: select_part, name: name}, function (data3){
                $('#returns').html(data3);
            });
        }
    });
});

来源：https://stackoverflow.com/questions/12986088/jquery-validation-plugin-and-submithandler

标签

jquery

jquery-validate