Jqueryフォームの検証

Question

私は現在の私の問題をマージしています。ページ区切りの入力検証が1つのWebページに表示されます。ここ は私の試みですが、それは、機能の両方を呼び出す任意のアイデアなぜ

jQueryの習慣：

<script> 
function isValidPassword(Passwordreg){ 
    var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/); 
    return pattern.test(Passwordreg); 
}; 
function isValidEmailAddress(emailAddress) { 
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 
    return pattern.test(emailAddress); 
}; 
    $(document).ready(function(){ 
     $("#email").focus(); 
     $("#email").blur(function() { 
     checkEmail($("#email").val()); 
     }); 
     $("#email").keydown(function() { 
      checkEmail($("#email").val()); 
     $("#Password").blur(function() { 
      checkPassword($("#Password").val()); 
     }); 
     $("#Password").keydown(function() { 
      checkPassword($("#Password").val()); 
    }); 

function checkPassword(Pword){ 
    if(!isValidPassword($("#Password").val())){ 
     $("#passwordError").html("Does Not Match the Reqirements"); 
     $("#emailError").addClass("error"); 
     $('input[type="submit"]').prop('disabled', true); 
     return false; 
    }else{ 
     $("#passwordError").html(""); 
     $("#Password").removeClass("error"); 
     $('input[type="submit"]').prop('disabled', false); 
     return true; 
    } 

} 
function checkEmail(emailAddie){ 
    if(!isValidEmailAddress($("#email").val())){ 
     $("#emailError").html("Please inert a correctly layed out email address"); 
     $("#email").addClass("error"); 
     $('input[type="submit"]').prop('disabled', true); 
     return false; 
    }else{ 
     $("#emailError").html(""); 
     $("#email").removeClass("error"); 
     $('input[type="submit"]').prop('disabled', false); 
     return true; 
    } 

} 
$("#submitB").click(function(e) { 
     if(!checkPassword($("#Password").val())){ 
      e.preventDefault(); 
     } 
    }); 
}); 
</script> 

そして、私のフォームがそれに6つの入力がありますが、我々は唯一の2

に焦点を当てる必要があります私は、設定したトリガで別々に呼び出そうと

<form> 
     <label for="email">Username/Email address</label> 
     <input id="email" type="text" name="email" ><span id="emailError"></span> 
     <label for="Password">Password</label> 
     <input id="Password" type="password" name="Password" ><span id="passwordError"></span> 
</form> 

は再び、これらの機能は動作しますが、私は一度

Answer 1

あなたの時間で両方の入力を監視しようとすると、彼らは失敗しますあなたのコードに構文エラーがありません。それはあなたのために働いていません。

ここに固定コードがあります。

function isValidPassword(Passwordreg){ 
 
    var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/); 
 
    return pattern.test(Passwordreg); 
 
}; 
 
function isValidEmailAddress(emailAddress) { 
 
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 
 
    return pattern.test(emailAddress); 
 
}; 
 
    $(document).ready(function(){ 
 
     $("#email").focus(); 
 
     $("#email").blur(function() { 
 
     checkEmail($("#email").val()); 
 
     }); 
 
     $("#email").keydown(function() { 
 
      checkEmail($("#email").val()); 
 
     $("#Password").blur(function() { 
 
      checkPassword($("#Password").val()); 
 
     }); 
 
     $("#Password").keydown(function() { 
 
      checkPassword($("#Password").val()); 
 
     }); 
 
     }); 
 

 
function checkPassword(Pword){ 
 
    if(!isValidPassword($("#Password").val())){ 
 
     $("#passwordError").html("Does Not Match the Reqirements"); 
 
     $("#emailError").addClass("error"); 
 
     $('input[type="submit"]').prop('disabled', true); 
 
     return false; 
 
    }else{ 
 
     $("#passwordError").html(""); 
 
     $("#Password").removeClass("error"); 
 
     $('input[type="submit"]').prop('disabled', false); 
 
     return true; 
 
    } 
 

 
} 
 
function checkEmail(emailAddie){ 
 
    if(!isValidEmailAddress($("#email").val())){ 
 
     $("#emailError").html("Please inert a correctly layed out email address"); 
 
     $("#email").addClass("error"); 
 
     $('input[type="submit"]').prop('disabled', true); 
 
     return false; 
 
    }else{ 
 
     $("#emailError").html(""); 
 
     $("#email").removeClass("error"); 
 
     $('input[type="submit"]').prop('disabled', false); 
 
     return true; 
 
    } 
 

 
} 
 
$("#submitB").click(function(e) { 
 
     if(!checkPassword($("#Password").val())){ 
 
      e.preventDefault(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <form> 
 
     <label for="email">Username/Email address</label> 
 
     <input id="email" type="text" name="email" ><span id="emailError"></span> 
 
     <label for="Password">Password</label> 
 
     <input id="Password" type="password" name="Password" ><span id="passwordError"></span> 
 
</form> 
 
    <!-- Put your html here! --> 
 
    </body> 
 

 
</html>

Here is a plunker