Question

我在一个页面上有两个表单。一个是它所在的特定页面的一个表单，另一个是每个页面上的一个侧面表单。我有一个验证器来设置格式错误的字段;它显示不完整的字段周围的红色框。这适用于第一个表单但是如果您提交第二个表单，它仍将仅格式化第一个表单。我已经取出了第一个表单的代码，第二个表单完美地工作。我的问题是如何让验证器检查并仅提交被点击的表单？我做了一个简短的测试页来说明问题。

<!DOCTYPE >
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/mktSignup.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css">
</head>
<body>
<!-- When you submit this form the appropriate red boxes are shown around the errored fields-->
<form id="requestAppointment" method="post" type="actionForm"  action="." name="requestFreeConsultation">
    <label for="name">Your Name</label><br>
    <input type="text" class="stdFormFieldSml defaultInvalid" value="First Name" name="firstName" id="firstName" onclick="if(this.value=='First Name')this.value='';" />
    <input type="submit" name="firstForm" value="Submit" />
</form>
<!-- This form when you hit submit causes red boxes around the previous form's incomplete fields-->
<form name="freeConsultationWidget" action="thank-you.php" method="post">
    <label for="nameMini">Your Name</label><br>
    <input type="text" class="stdFormFieldSml defaultInvalid" value="First Name" name="firstNameMini" id="firstNameMini" onclick="if(this.value=='First Name')this.value='';" />
    <input type="image" name="secondForm" value="submit1"/>
</form>
</body>
</html>

大家都建议我发布js文件。（我没有发布标准的jquery验证文件。）

    $(document).ready(function(){

    jQuery.validator.addMethod("password", function( value, element ) {
        var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
        if (!result) {
            element.value = "";
            var validator = this;
            setTimeout(function() {
                validator.blockFocusCleanup = true;
                element.focus();
                validator.blockFocusCleanup = false;
            }, 1);
        }
        return result;
    }, "Your password must be at least 6 characters long and contain at least one number and one character.");

    // a custom method making the default value for companyurl ("http://") invalid, without displaying the "invalid url" message
    jQuery.validator.addMethod("defaultInvalid", function(value, element) {
        return value != element.defaultValue;
    }, "");

    jQuery.validator.addMethod("billingRequired", function(value, element) {
        if ($("#bill_to_co").is(":checked"))
            return $(element).parents(".subTable").length;
        return !this.optional(element);
    }, "");

    jQuery.validator.messages.required = "";
    $("form").validate({
        invalidHandler: function(e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted below'
                    : 'You missed ' + errors + ' fields.  They have been highlighted below';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },
        onkeyup: false,
        submitHandler: function() {
            $("div.error").hide();
            alert("submit! use link below to go to the other step");
        },
        messages: {
            password2: {
                required: " ",
                equalTo: "Please enter the same password as above"  
            },
            email: {
                required: " ",
                email: "Please enter a valid email address, example: you@yourdomain.com",
                remote: jQuery.validator.format("{0} is already taken, please enter a different address.")  
            }
        },
        debug:true
    });

  $("input.home").mask("(999) 999-9999");
  $("input.zipcode").mask("99999");
  $("input.ssNumber").mask("999-999-9999");

/*  
  var creditcard = $("ssNumber").mask("999-999-9999 9999");

  $("#cc_type").change(
    function() {
      switch ($(this).val()){
        case 'amex':
          creditcard.unmask().mask("9999 999999 99999");
          break;
        default:
          creditcard.unmask().mask("9999 9999 9999 9999");
          break;
      }
    }
  );
*/

/*
  // toggle optional billing address
  var subTableDiv = $("div.subTableDiv");
  var toggleCheck = $("input.toggleCheck");
  toggleCheck.is(":checked")
    ? subTableDiv.hide()
    : subTableDiv.show();
  $("input.toggleCheck").click(function() {
      if (this.checked == true) {
        subTableDiv.slideUp("medium");
        $("form").valid();
      } else {
        subTableDiv.slideDown("medium");
      }
  });
*/

});

$.fn.hoverClass = function(classname) {
    return this.hover(function() {
        $(this).addClass(classname);
    }, function() {
        $(this).removeClass(classname);
    });
};

Answer 1

似乎你的验证器脚本选择页面的第一个Form，就像这样

 //javascript code 
 var Form = document.forms[1]; , 

 // you need to select second form, using

 var Form2 = document.forms[2]; ,

Answer 2

如果您使用的是jquery

，可以在脚本部分尝试此操作

$('form[name="requestAppointment"]').submit(function(){
   alert('From requestAppointment submited');// Test purpose
   // your logic
});

$('form[name="freeConsultationWidget"]').submit(function(){
   alert('From freeConsultationWidget submited');// Test purpose
   // your logic
});

两个表单HTML，验证仅提交表单

2 个答案: