2017-04-19 19 views
1

JQuery検証プラグインのカスタムメソッドを追加しました。ここで多くの質問を閲覧した後、私はそれを理解できません。JQuery検証プラグインのカスタムメソッドが動作しません

カスタムのphonenumberフィールドを入力しないとエラーメッセージが表示されますが、たとえば「A」の文字を入力するとフォームが通過します。

どうすればこの問題を解決できますか?

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="ISO-8859-1"> 
 
\t \t <title>Insert title here</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
 
\t \t <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
\t \t <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script> 
 

 
\t \t <form action="" id="registration-form"> 
 
\t \t \t <p> 
 
\t \t \t  Firstname 
 
\t \t \t  <input name="firstname" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-30" 
 
\t \t \t \t \t data-validation-error-msg="Firstname has to be an alphabetical value (1-30 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Prefix 
 
\t \t \t  <input name="prefix" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-20" 
 
\t \t \t \t \t data-validation-error-msg="Prefix has to be an alphabetical value (1-20 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Lastname 
 
\t \t \t  <input name="lastname" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-50" 
 
\t \t \t \t \t data-validation-error-msg="Lastname has to be an alphabetical value (1-50 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Company 
 
\t \t \t  <input name="company" data-validation="required" 
 
\t \t \t \t \t data-validation-length="1-50" 
 
\t \t \t \t \t data-validation-error-msg="Company has to be an alphabetical value (1-50 chars)"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Phonenumber 
 
\t \t \t \t <input name="phonenumber" data-validation="required phonenumber" 
 
\t \t \t \t \t data-validation-error-msg="This is not a valid phonenumber"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t  <p> 
 
\t \t \t  E-mail 
 
\t \t \t  <input name="mail" data-validation="email" 
 
\t \t \t \t \t data-validation-error-msg="E-mail has to be a valid email"> 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  <input value="Validate" type="submit"> 
 
\t \t \t  <input value="Reset form" type="reset"> 
 
\t \t \t </p> 
 
\t \t </form> 
 
\t \t 
 
\t \t <script> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $.validator.addMethod('phonenumber', function (value, element) { 
 
\t \t \t \t  return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value); 
 
\t \t \t \t }, "Please enter a valid phone number"); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $.validate({ 
 
\t \t \t 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

+0

あなたの正規表現がうまく機能していません。この記事では、いくつかの例があります。http://stackoverflow.com/questions/19840301/jquery-to-validate-phone-numberそれらを使用してみてください。幸運の仲間! – Antonio682

答えて

0

コードの下を参照してください。私はそれが簡単に使用できるようにすることに変更します

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="ISO-8859-1"> 
 
\t \t <title>Insert title here</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 

 
\t \t <form action="" id="registration-form"> 
 
\t \t \t <p> 
 
\t \t \t  Firstname 
 
\t \t \t  <input name="firstname" class="required validate[required]" minlength="1" manlength="30" > 
 
\t \t \t </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Prefix 
 
\t \t \t  <input name="prefix" class="required validate[required]" minlength="1" manlength="20"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Lastname 
 
\t \t \t  <input name="lastname" class="required validate[required]" minlength="1" manlength="50"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Company 
 
\t \t \t  <input name="company" class="required validate[required]" minlength="1" manlength="50"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  Phonenumber 
 
\t \t \t \t <input name="phonenumber" class="required validate[required] phonenumber"> </p> 
 
\t \t 
 
\t \t  <p> 
 
\t \t \t  E-mail 
 
\t \t \t  <input name="mail" class="email"> </p> 
 
\t \t 
 
\t \t \t <p> 
 
\t \t \t  <input value="Validate" type="submit"> 
 
\t \t \t  <input value="Reset form" type="reset"> 
 
\t \t \t </p> 
 
\t \t </form> 
 
\t \t <script> 
 
\t \t \t 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $.validator.addMethod('phonenumber', function (value, element) { 
 
\t \t \t \t  return this.optional(element) || /^(\+91-|\+91|0)?\d{10}$/.test(value); 
 
\t \t \t \t }, "Please enter a valid phone number"); 
 

 
\t \t \t \t $(document).on('submit', 'form#registration-form', function(event) { 
 
\t \t \t \t \t if(!$(this).valid()){ 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

+0

ありがとう!電話番号の部分がエラーメッセージを含めて現在機能しています。 firstnameなどのエラーメッセージを取得するためのカスタムメソッドを作成する必要がありますか、または私が以前知っていた "data-validation-error-msg"の代替手段がありますか? – Kevin

+0

異なる側面の入力ファイルごとにカスタムメソッドを追加する必要はありません。それらのほとんどは図書館に含まれており、クラス名だけで活動しています。フィールドを必要とする例として、クラス 'required'を入力するだけです。 'email'と同じです。ここにクラスのリストがあります。 https://jqueryvalidation.org/documentation/ – Mufi

+0

各入力フィールドへのカスタムメッセージの場合は、単一の検証メソッドでそれぞれにカスタムエラーメッセージを与えることができます。この回答はあなたの設定に役立ちます。 http://stackoverflow.com/questions/2457032/jquery-validation-change-default-error-message/2457053 – Mufi

関連する問題