我添加使用jQuery驗證插件一些現有的網頁的一些客戶端驗證，下對齊消息。 https：// jqueryvalidation.org 驗證工作正常。但是，由於用戶希望所有字段居中，驗證消息顯示爲居中。jQuery的驗證插件想要的文本框

是否有可能保持居中文本框輸入，但有文本框下出現的消息和驗證對齊文本開始在哪裏？

這是我迄今所顯示的驗證： 1

這正是我想達到與它下面的文本框對齊的驗證消息。 2

以下是我正在使用的一些簡單代碼，以瞭解如何使用驗證。實際的表格通常有12-15個輸入字段，全部居中。

我知道了「中心」的標籤已經過時，但仍試圖如果可能的話，要保持它現在。

<script src="https://jqueryvalidation.org/files/lib/jquery.js"></script> 
    <script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> 
    <script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 

<script> 

    $(document).ready(function() { 
     $("#myForm").validate(); 
    }); 

</script> 

<style> 
    label.error { 
     display: block; 
     float: none; 
     color: red; 
    } 


    input { border: 1px solid black; } 
    input:focus { border: 1px solid black; } 
    input.error { border: 1px solid red; } 

</style> 

    <center> 
    <form id="myForm" action="/SubmitSuccess.html"> 

     <label>Input Number: </label> 
     <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field. Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits" /> 

     <br> 

     <label>Input Alpha: </label> 
     <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." /> 

     <br><br> 

     Click Submit when complete<br> 

     <input type="submit" name="SUBMIT" value="SUBMIT" /> 

    </form> 
</center>

JFiddle - https://jsfiddle.net/4d3xgud9

來源

2017-04-16 dmayley

CSS ...
使用您的jQuery驗證插件。

好吧......隨着一些HTML調整！

CSS改變（影響錯誤消息）：

label.error { 
    display: block; 
    float: none; 
    color: red; 

    position:relative;  /* added */ 
    top:0.2em;    /* added */ 
} 


td.top{     /* added */ 
    vertical-align:top;  /* added */ 
}       /* added */ 
td{      /* added */ 
    padding-bottom:4px;  /* added */ 
}       /* added */

HTML改變（使用的表！-嘿哇真是個好主意！）：

<form id="myForm" action="/SubmitSuccess.html"> 
    <table> 
    <tr> 
     <td class="top"> 
     <label>Input Number: </label> 
     </td> 
     <td> 
     <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field. Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits" /> 
     </td> 
    </tr> 

    <tr> 
     <td class="top"> 
     <label>Input Alpha: </label> 
     </td> 
     <td> 
     <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." /> 

     </td> 
    </tr> 
    </table> 
    <br> 
    <br> 
    Click Submit when complete<br> 

    <input type="submit" name="SUBMIT" value="SUBMIT" /> 

</form>

WORKING：

label.error { 
 
    display: block; 
 
    float: none; 
 
    color: red; 
 

 
    position:relative; 
 
    top:0.2em; 
 
} 
 

 

 
td.top{ 
 
    vertical-align:top; 
 
} 
 
td{ 
 
    padding-bottom:4px; 
 
} 
 

 

 
input { \t border: 1px solid black; } 
 
input:focus { border: 1px solid black; } 
 
input.error { border: 1px solid red; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 
"http://www.w3.org/TR/html4/loose.dtd"> 
 

 
<script src="https://jqueryvalidation.org/files/lib/jquery.js"></script> 
 
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> 
 
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> 
 

 
<script> 
 

 
    $(document).ready(function() { 
 
    $("#myForm").validate(); 
 
    }); 
 

 
</script> 
 

 
</head> 
 

 
<body bgcolor="white"> 
 

 
    <center> 
 
    <form id="myForm" action="/SubmitSuccess.html"> 
 
     <table> 
 
     <tr> 
 
      <td class="top"> 
 
      <label>Input Number: </label> 
 
      </td> 
 
      <td> 
 
      <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field. Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits" /> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td class="top"> 
 
      <label>Input Alpha: </label> 
 
      </td> 
 
      <td> 
 
      <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." /> 
 

 
      </td> 
 
     </tr> 
 
     </table> 
 
     <br> 
 
     <br> 
 
     Click Submit when complete<br> 
 

 
     <input type="submit" name="SUBMIT" value="SUBMIT" /> 
 

 
    </form> 
 
    </center> 
 

 
</body>

正確的使用情況：

HHHHHH

來源

2017-04-16 07:18:53

感謝偉大的答覆！該表引入了其他問題，例如根據單元格中消息的長度來移動文本框。但是，這比我所擁有的更好，它回答了我的問題！我很感謝您的詳細回覆！這對學習使用這個插件非常有幫助！ – dmayley

偉大的閱讀。 –

您可以使用該功能errorPlacement在任何你想要的位置移動的錯誤消息。以下是使用Bootstrap 3的錯誤放置示例：Bootstrap 3 with jQuery Validation Plugin

您應該可以修改以下代碼，使其以您想要的方式工作。只有

// override jquery validate plugin defaults 
$.validator.setDefaults({ 
    highlight: function(element) { 
     $(element).closest('.form-group').addClass('has-error'); 
    }, 
    unhighlight: function(element) { 
     $(element).closest('.form-group').removeClass('has-error'); 
    }, 
    errorElement: 'span', 
    errorClass: 'help-block', 
    errorPlacement: function(error, element) { 
     if(element.parent('.input-group').length) { 
      error.insertAfter(element.parent()); 
     } else { 
      error.insertAfter(element); 
     } 
    } 
});

來源

2017-04-16 06:39:19 adamj

$('#myform').validate({ // initialize the plugin 
     rules: { 
      "your field name or id": { 
       required: true 
      } 
     }, 
     messages: { 
      "your field name or id": { 
       required: "Enter something" 
      } 
     } 
    });

來源

2017-04-16 08:27:37

jQuery的驗證插件想要的文本框

回答

WORKING：

相關問題