兩種形式的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，只驗證提交的形式

回答

相關問題