如何對齊單選按鈕和複選框的驗證錯誤

Question

這裏我使用驗證插件，一切工作正常，但單選按鈕和複選框顯示的錯誤消息沒有正確安排。例如，在這裏我使用兩個單選按鈕爲性別選擇。在這種情況下，如果沒有選擇任何內容，則錯誤消息將顯示在兩個單選按鈕之間。列表框也發生同樣的事情。隨着這個問題，我嘗試了範圍選項的電話號碼，但我沒有如何正確使用範圍選項。在這個問題上幫助我。

JSCode：

$(document).ready(function() { 
     $.validator.addMethod("validNameCharacter", function (value) { 
      var pattern = /^[a-zA-Z0-9]+$/; 
      return (pattern.test(value) > 0); 
     }, "Avoid Special Characters in User Name"); 
     $.validator.addMethod("validPasswordCharacter", function (value) { 
      var pattern = /^[a-zA-Z0-9]+$/; 
      return (pattern.test(value) > 0); 
     }); 
     $.validator.addMethod("ValidSalary", function (value) { 
      if (isNaN(value)) { 
       return false; 
      } else { 
       return true; 
      } 
     }, "Please enter a valid amount"); 
     var validator = $("#registrationForm").validate({ 
      errorClass: "error", 
      validClass: "valid", 
//   onkeyup: true, 
//   onblur: true, 
//   errorContainer: "#FormValidationErrors", 
//   errorLabelContainer: $('ol', "#FormValidationErrors"), 
//   wrapper: 'li', 
      rules: { 
       UserName: { 
        required: true, 
        minlength: 4, 
        maxlength: 15, 
        validNameCharacter: true 
       }, 
       Password: { 
        required: true, 
        minlength: 4, 
        maxlength: 15, 
        validPasswordCharacter: true 
       }, 
       ConfirmPassword: { 
        required: true, 
        minlength: 4, 
        maxlength: 15, 
        validPasswordCharacter: true, 
        equalTo: "#txtPassword" 
       }, 
       EmailId: { 
        required: true, 
        email: true 
       }, 
       Gender: "required", 
       DOB: { 
        required: true, 
         date:true 
       }, 
       PhoneNumber: { 
        required: true, 
        range: [1, 10] 
       }, 
       Salary: { 
        ValidSalary: true 
       }, 
       Country: { 
        required: true 
       }, 
       JobAlert: { 
        required: true 
       }, 
       Languages: { 
        required: true 
       }, 
       About: { 
        required: true, 
        minlength: 20, 
        maxlength: 120 
       }, 
       TermsAndConditions: "required" 
      }, 
      messages: { 
       UserName: { 
        required: "User Name is Required", 
        minlength: "Please enter atleast 4 characters ", 
        maxlength: "Please enter lessthan fifteen characters" 
       }, 
       Password: { 
        required: "Password is Required", 
        minlength: "Please enter atleast 4 characters ", 
        maxlength: "Please enter less than fifteen characters", 
        validPasswordCharacter: "The Password you entered is invalid" 
       }, 
       ConfirmPassword: { 
        required: "Confirm password is required", 
        minlength: "Please enter atleast 4 characters ", 
        maxlength: "Please enter less than fifteen characters", 
        validPasswordCharacter: "The Password you entered is invalid", 
        equalTo: "Password Does not matches" 
       }, 
       EmailId: { 
        required: "Email is Required", 
        email: "Enter Valid Email" 
       }, 
       Gender: { 
        required: "Please select the Gender" 
       }, 
       DOB: 
       { 
        required: "Please enter your Date of birth", 
       }, 
       PhoneNumber: { 
        range: "Enter phone number between 1 to 10 characters" 
       }, 
       Country: { 
        required: "Please select the Country" 
       }, 
       JobAlert: { 
        required: "Please select the Job Alerting type" 
       }, 
       Languages: { 
        required: "Please select the States" 
       }, 
       About: { 
        minlength: "Please enter morethan 20 characters", 
        maxlength: "Please enter lessthan 120 characters" 
       }, 
       TermsAndConditions: "Please Accept It" 
      } 
     }); 
     $(".cancel").click(function() { 
      validator.resetForm(); 
     }); 
     $("#btnChkValidForm").on('click', function() { 
      var status = $("#registrationForm").valid(); 
      alert("Form is : " + status + "\nTotal Number of Invalid Fields is : " + validator.numberOfInvalids()); 
     }); 

    }); 

HTML：

<div id="UserRegistrationContainer" style="background: none repeat scroll 0% 0% slategray; width: 100%; border: 1px solid aqua; border-radius: 11px 11px 11px 11px;" > 
    <form action="/" method="post" id="registrationForm"> 
    <table> 
     <tr> 
      <td> 
      User Name: 
      </td> 
      <td> 
       <input type="text" name="UserName" value="" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      Password: 
      </td> 
      <td> 
       <input type="password" name="Password" value="" id="txtPassword"/> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      Confirm Password: 
      </td> 
      <td> 
       <input type="password" name="ConfirmPassword" value="" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      Mail-ID: 
      </td> 
      <td> 
       <input type="text" name="EmailId" value="" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Gender: 
      </td> 
      <td> 
       <input type="radio" name="Gender" value="Male" /> 
       <label for="Gender">Male</label> 
       <input type="radio" name="Gender" value="Female" /> 
       <label for="Gender" id="genderLabel">Fe Male</label> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       DOB: 
      </td> 
      <td> 
       <input type="text" name="DOB" value="" id="txtDOB" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Present Salary: 
      </td> 
      <td> 
       <input type="text" name="Salary" value="" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Phone Number: 
      </td> 
      <td> 
       <input type="text" name="PhoneNumber" value="" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Country: 
      </td> 
      <td> 
       <select name="Country"> 
        <option value="">Select Country</option> 
        <option value="India">India</option> 
        <option value="Sri Lanka">Sri Lanka</option> 
        <option value="China">China</option> 
        <option value="Japan">Japan</option> 
        <option value="United States">United States</option> 
        <option value="United Kingdom">United Kingdom</option> 
        <option value="Australia">Australia</option> 
        <option value="South Africa">South Africa</option> 
        <option value="Russia">Russia</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td> 
        Notify Job Alert: 
      </td> 
      <td> 
       <input type="checkbox" name="JobAlert" value="Email" /> Email <br /> 
       <input type="checkbox" name="JobAlert" value="Message" /> Message <br /> 
       <input type="checkbox" name="JobAlert" value="IVR" /> Voice Call <br /> 
       <input type="checkbox" name="JobAlert" value="Post" /> Post <br /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Languages Interested: 
      </td> 
      <td> 
       <select name="Languages" multiple="multiple" size="5"> 
        <option value="C">C</option> 
        <option value="C++">C++</option> 
        <option value="Java">Java</option> 
        <option value="Dot Net">Dot Net</option> 
        <option value="Vxml">Vxml</option> 
        <option value="Perl">Perl</option> 
        <option value="Phython">Phython</option> 
        <option value="HTML5 CSS">HTML5 CSS</option> 
        <option value="Unix">Unix</option> 
       </select> 
      </td> 
     </tr> 
      <tr> 
      <td> 
       About You: 
      </td> 
      <td> 
       <textarea name="About" cols="33" rows="5" style="color:Gray;"></textarea> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3"> 
       <input type="checkbox" name="TermsAndConditions" value="" class="checkbox" />Accept Terms And Conditions      
      </td> 
     </tr> 
     <tr> 
      <td style=""> 
       <input type="submit" id="btnSubmit" value="Submit" name="Submit"/> 
       <input type="reset" id="resetForm" value="Reset" style="margin-left:15px;" class="cancel" /> 
       <input type="button" id="btnChkValidForm" value="Check Form" style="margin-left:11px;" /> 
       <input type="submit" name="Save" value="Save" class="cancel" /> 
      </td> 
     </tr> 
    </table> 
</form> 
<div id="FormValidationErrors" class="container" style="margin-left: 325px;color:Red;"> 

    <ol> 
    </ol> 
</div> 
</div> 

的CSS：

.error { 
    background-color: #FFCECE; 
    border:solid 1px red; 
} 
.valid { 
    color:black; 
} 

大號油墨我的代碼： 鏈接： - http://jsfiddle.net/qHCBy/

Answer 1

報價OP：

「如果沒有選擇在兩個單選按鈕之間顯示在消息中的錯誤」

這是默認行爲。該消息（<label>）會立即出現在組中的第一個無線電或複選框之後。

您將使用errorPlacement回調函數更改其位置。

首先檢查它是否是收音機或複選框，並相應地放置它。

這是默認的回調...

errorPlacement: function(error, element) { 
    error.insertAfter(element); 
} 

在您.validate()，做這樣的事情......

errorPlacement: function(error, element) { 
    if (element.attr("type") === "radio") { 
     // your custom position 
    } else { 
     error.insertAfter(element); 
    } 
} 

---

報價OP：

「隨着這個問題，我嘗試了範圍選項的電話號碼，但我不知道如何正確使用範圍選項。」

我真的不知道你的意思，但是這是你如何使用range方法，一樣的，你已經實現了。

參見：http://jqueryvalidation.org/range-method/

描述：使元件需要一個給定的值範圍。

使「場」一值和23之間13：

$("#myform").validate({ 
    rules: { 
     field: { 
      range: [13, 23] 
     } 
    } 
}); 

也許你想在rangelength方法呢？

參見：http://jqueryvalidation.org/rangelength-method/

使長2個6 字符之間的「場」：

$("#myform").validate({ 
    rules: { 
     field: { 
      rangelength: [2, 6] 
     } 
    } 
});