jQueryで以下のコードの検証を書く方法は？ここで

Question

、私のコード姓と名のフィールドでは、私が試したその2つのフィールドの検証を書くことが、correct.I添付された画像と

jQueryのコードの下に私のコードを取得していない午前どのように並んで配置：

jQuery(function(){ 

      jQuery("#fName").validate({ 

       expression: "if (VAL.match(/^[a-zA-Z]{2,30}$/)) return true; else return false;", 

       message: "Please enter the First Name Last Name" 

      }); 
     }); 

signup.html

<div class="form-fullname"> 
     <input class ="first-name"type="text" id="fName" name="firstname" placeholder="First name" required=""> 

     <input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" required=""> 
    </div> 

フルページでは、エラー画像です。

エラー： このサインアップフォームには、ファーストネームの数字を入力するとエラーメッセージが表示されるはずですが、画像のようにファーストネームの横に表示されます。それでは、私は下のエラーメッセージをどうやって得ることができるか教えてください。

Answer 1

JavaScriptの正規表現にtest関数を使用して、入力が有効な形式であるかどうかを知ることができます。

エラーメッセージを表示または非表示にするには、css関数を使用します。

姓フィールドがフォーカスされているときにファーストネームフィールドにエラーを表示する場合は、jQueryでフォーカスイベントを書き込むことができます。

$(document).ready(function() { 
 

 
    var NAME_REGEX = /^[a-zA-Z]{2,30}$/; 
 

 
    $('#signupBtn').click(signupBtnClick); 
 
    
 
    $('input[name="lastname"]').focus(lastNameOnFocus); 
 
    
 
    function signupBtnClick() { 
 
    validateFirstName(); 
 
    validateLastName(); 
 
    } 
 
    
 
    function lastNameOnFocus() { 
 
    validateFirstName(); 
 
    } 
 
    
 
    function validateFirstName() { 
 
    var firstName = $('input[name="firstname"]').val(); 
 
    
 
    if(NAME_REGEX.test(firstName)) { 
 
    \t $('#firstnameerror').css('display', 'none'); 
 
    } else { 
 
    \t $('#firstnameerror').css('display', 'block'); 
 
    } 
 
    } 
 
    
 
    function validateLastName() { 
 
    var lastName = $('input[name="lastname"]').val(); 
 
    
 
    if(NAME_REGEX.test(lastName)) { 
 
    \t $('#lastnameerror').css('display', 'none'); 
 
    } else { 
 
    \t $('#lastnameerror').css('display', 'block'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div> 
 
    <h3>Sign Up</h3> 
 
</div> 
 

 
<div> 
 
    <input type="text" name="firstname" placeholder="First Name"> 
 
    <span id="firstnameerror" style="color: red; display: none;">First Name is required</span> 
 
</div> 
 

 
<div style="margin-top: 1%;"> 
 
    <input type="text" name="lastname" placeholder="Last Name"> 
 
    <span id="lastnameerror" style="color: red; display: none;">Last Name is required</span> 
 
</div> 
 

 
<div style="margin-top: 2%;"> 
 
    <button type="button" id="signupBtn">Submit</button> 
 
</div>

Answer 2

は、代わりにinputタグに正規表現を追加してください：あなたの代わりに[a-zA-Z]の正規表現の上ワット\使用することができます

<form action="register_page"> 
    <div class="form-fullname"> 
     <input class ="first-name" type="text" id="fName" name="firstname" placeholder="First name" pattern="^\w{2,30}$" required> 

     <input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" pattern="^\w{2,30}$" required> 
    </div> 
    <input type="submit" value="Register"> 
</form> 

注意を。この方法では、この場合jqueryの検証は必要ありません。