Jquery驗證插件Keydown

使用Jquery Validate插件，是否有一種方法，只要第一個鍵被按下，並顯示錯誤消息，直到他們已經輸入需要什麼爲止？Jquery驗證插件Keydown

所以在輸入字段我希望出現確認消息，直到它們正確地輸入需要什麼第一次按鍵

我的代碼如下

 <?php 
// Error Config 
include_once("PHP/Config.php"); 
// Session 
include_once("PHP/Session.php"); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>TBA </title> 

<meta name="description" content="Coming soon 
<meta name="keywords" content=" 

" /> 
<link rel="icon" type="image/ico" href="favicon.ico"/> 

<link href="CSS/Site_Style.css" rel="stylesheet" type="text/css" /> 
<link href="CSS/Register_Form.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="JS/jquery.validate.js"></script> 
<script type="text/javascript" src="JS/additional-methods.min.js"></script> 

<script> 
$(document).ready(function() { 

    $("#SignUp").validate({ 
     rules: { 
      email: { 
       required: true, 
       email: true 
      }, 
      password: { 
       required: true, 
       password: true 
      }, 
      confirm_password: { 
       required: true, 
       password: true, 
       notEqual: "#password" 
      }, 
      company: { 
       nls: true, 
       required: true 
      }, 
      telephone: { 
       phone: true 
      } 
     } 
    }); 

    $.validator.addMethod("email", function (value, element) { 
     return this.optional(element) || /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value); 
    }, "Please enter a valid email address"); 

    $.validator.addMethod("password", function (value, element) { 
     return this.optional(element) || /^[[email protected]#$%^&*()_]{6,16}$/i.test(value); 
    }, "Passwords are 6-16 characters"); 

    jQuery.validator.addMethod("notEqual", function (value, element, param) { 
     return this.optional(element) || value == param; 
    }, "Passwords Do Not Match"); 

    $.validator.addMethod("nls", function (value, element) { 
     return this.optional(element) || /^[a-zA-Z0-9\s.\-_']+$/i.test(value); 
    }, "Please Only Enter Alpha Numeric Characters"); 

    $.validator.addMethod("phone", function (value, element) { 
     return this.optional(element) || /(\s*\(?0\d{4}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)/i.test(value); 
    }, "Please Only Enter UK Telephone Numbers"); 

}); 
</script> 




</head> 

<body> 
<div id="Site_Holder"> 

<div id="Header_Holder"> 
<?php include_once "PHP/Inserts/Header_Content.php";?> 
</div><!-- Header Holder End --> 

<div id="Navigation_Holder"> 

<?php include_once "PHP/Inserts/Navigation_Content.php";?> 


</div><!-- Navigation Holder End --> 

<div id="Content_Holder"> 

    <div id="Register_Form_Holder" class="General_text"> 

     <div class="Blank_Divider">Register a Climbing Centre<br/> 
     <br/></div> 

     <div class="Blank_Divider"></div> 
     <form id="SignUp"> 



     <div class="Name_Form_Field">E-mail Address:</div> 
     <div class="Input_Form_Field"><input id="email" name="email"/></div> 

     <div class="Blank_Divider"></div> 

     <div class="Name_Form_Field">Password:</div> 
     <div class="Input_Form_Field"><input id="password" name="password" type="password" /></div> 

     <div class="Blank_Divider"></div> 

     <div class="Name_Form_Field">Confirm Password:</div> 
     <div class="Input_Form_Field"><input id="confirm_password" name="confirm_password" type="password" /></div> 

     <div class="Blank_Divider"></div> 


     <div class="Blank_Divider">Header 
     <br/> 
     <br/></div> 

     <div class="Name_Form_Field"> Name:</div> 
     <div class="Input_Form_Field"><input id="company" name="company" type="text" /></div> 

     <div class="Blank_Divider"></div> 

     <div class="Name_Form_Field">Contact Telephone Number:</div> 
     <div class="Input_Form_Field"><input id="telephone" name="telephone" type="text" /></div> 



     </form> 



    </div> 


</div><!-- Content Holder End --> 

<div id="Footer_Holder"> 

<?php include_once "PHP/Inserts/Footer_Content.php";?> 

</div><!-- Footer Holder End --> 


</div><!-- Site Holder End --> 
</body> 


</html>

來源

2013-11-28 user2224798

你問該插件的默認行爲替換您的驗證碼。顯示你的代碼，以便我們可以看到你的錯在哪裏。 – Sparky

您忘記在代碼中包含表單的HTML標記。 – Sparky

報價OP：

「使用jQuery驗證插件，是那裏第一個鍵被按下，一旦確認，並顯示錯誤消息，直到他們已經進入需要什麼方式？因此，我希望輸入字段中的第一個按鍵能夠顯示驗證消息，直到他們正確地輸入了所需的內容。「

這已經是插件的默認行爲。（onkeyup選項默認啓用。）

看到這個簡單的演示，只要您在第一個字段中輸入一個字符（使用email規則），郵件會立即告訴您輸入一個有效的電子郵件地址。只要在第二個字段中輸入一個字符，minlength規則就會告訴您至少輸入10個字符。如果您開始填寫某個字段然後將其刪除，則會出現required規則的消息。消息將按其規則聲明的順序顯示（除required規則外）。

$(document).ready(function() { 

    $('#myform').validate({ 
     rules: { 
      field1: { 
       required: true, 
       email: true 
      }, 
      field2: { 
       required: true, 
       minlength: 10, 
       alphanumeric: true 
      }, 
      field3: { 
       digits: true, 
       minlength: 3 
      } 
     } 
    }); 

});

DEMO：http://jsfiddle.net/yyR9C/

編輯：

相同的jsfiddle但是，張貼在OP的編輯代碼：

仍在工作：http://jsfiddle.net/yyR9C/1/

來源

2013-11-29 19:04:53 Sparky

我可以從jsfiddle中看到你的解決方案工作正常，而且我希望如何驗證，但由於某種原因，我仍然只會在你退出該字段後纔會生效，我的代碼低於 – user2224798

@ user2224798，我只是將你的代碼放入我的jsFiddle和它對我來說工作得很好：http://jsfiddle.net/yyR9C/1/〜與jsFiddle中的工作代碼相比，您將不得不仔細檢查代碼。 – Sparky

@ user2224798此外，您不需要創建稱爲'nls'，'phone'和'notequal'的規則......這些規則已經作爲插件的一部分存在，但是，使用'alphanumeric'和'phoneUK' ，你需要包含'additional-methods.js'文件。而當你想匹配密碼字段時，由於'equalTo'規則確保第二個字段***必須匹配第一個字段，因此使用'required'和'password'規則兩次是多餘的。請參閱：http://jsfiddle.net/yyR9C/2/ – Sparky

-1

我不知道如果我理解這個問題很好，但我認爲你可以從jQuery用戶keyup事件。類似的東西

$("#formId input[type=text]").keyup(function(){ 
    $("#formId").valid(); 
    // Checks whether the selected form is valid or whether all selected elements are valid.

請參閱docs。

}）;

或類似的東西。請提供更多細節。祝您有美好的一天。

來源

2013-11-29 12:30:43

不，不，不......如果你明白'.validate（）'是插件的初始化方法，那麼你會意識到你的解決方案無法工作。 – Sparky

與此

$("#SignUp").validate({ 
 
    onkeyup: function(element) { 
 
     $(element).valid(); 
 
    },  
 
    rules: { 
 
      email: { 
 
       required: true, 
 
       email: true 
 
      }, 
 
      password: { 
 
       required: true, 
 
       password: true 
 
      }, 
 
      confirm_password: { 
 
       required: true, 
 
       password: true, 
 
       notEqual: "#password" 
 
      }, 
 
      company: { 
 
       nls: true, 
 
       required: true 
 
      }, 
 
      telephone: { 
 
       phone: true 
 
      } 
 
     } 
 
    });

來源

2016-06-17 11:04:54

Jquery驗證插件Keydown

回答

相關問題