Блог

У меня возникли проблемы с объединением моей текущей; разделенной страницей проверки ввода на одной веб-странице. Вот моя попытка, но она не будет вызывать обе функции, есть идеи, почему

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>
  

Опять же, эти функции работают, если я пытаюсь вызвать их отдельно с помощью настроенных мной триггеров, но они терпят неудачу, когда я пытаюсь отслеживать оба входа одновременно

У вас синтаксическая ошибка в вашем коде. Так что это не работает для вас.

Вот исправленный код.

 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>  

Вот плунжер