两种形式的HTML，只验证提交的形式

我在一个页面上有两种形式。一个只是它所在的特定页面的一个表单，另一个是每个页面上的一个辅助表单。我已经得到了一个验证器来工作来格式化出错的字段;它显示不完整的字段周围的红框。这在第一种形式下工作，但是如果您提交第二种形式，它仍将仅格式化第一种形式。我已经拿出第一种形式的代码，第二种形式完美地工作。我的问题是我如何才能让验证器检查并仅提交被点击的表单？我做了一个简短的测试页面来说明问题。两种形式的HTML，只验证提交的形式

<!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: [email protected]", 
       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); 
    }); 
};

来源

2012-06-05 Lmiah

显示你的表单的验证器 – Sergey

您可以在脚本部分试试这个，前提是你正在使用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 
});

来源

2012-06-05 13:33:01

所以你说我需要在js文件中有两组完全独立的代码？有没有更有效的方法来做到这一点？ – Lmiah

我已经把我的JS文件发布到我原来的帖子，谢谢你的帮助！ – Lmiah

@Lmiah您在文章中提供的脚本与js/jquery.validate.js相同，或者此文件包含另一个脚本？如果它是一个不同的文件，那么PLZ会提供您下载文件的链接。所以我可以用很多方式理解它。 –

看来你的验证脚本选择页面的第一种形式，像这样

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

// you need to select second form, using 

var Form2 = document.forms[2]; ,

来源

2012-06-05 13:25:34

你能发布你的验证脚本吗？ –

我把它重新贴回原来的声明。谢谢！ – Lmiah

两种形式的HTML，只验证提交的形式

回答

相关问题