ボタンをクリックした後の異なる入力の妥当性確認

Question

私は名前と電子メールの値と妥当性チェックが設定されたフォームを持っています。

HTML：

<fieldset class="form-group"> 
    <label for="name">Name</label> 
    <input type="text" class="form-control" id="name" placeholder="Name"> 
    <div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div> 
    </fieldset> 
    <!--name--> 

    <fieldset class="form-group"> 
     <label for="email">E-mail</label> 
     <input type="email" class="form-control" id="email" placeholder="E-mail"> 
     <div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div> 
    </fieldset> 
    <!--email--> 

<button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"> Process Payment </button> 

JS

var nameWarning = $(".yellow"); 
var emailWarning = $(".red"); 
$("#submitPaymentButton").prop("disabled", true); 

emailWarning.hide(); 
nameWarning.hide(); 

$(document).ready(function() { 

    /**************************** 
    Name validation 
    ******************************/ 
    $("#name").focusout(function() { 
    if ($(this).val().length === 0) { 
     $(this).parent().removeClass("has-warning"); 
     nameWarning.hide(); 
     validateAllInputs(); 

    } else if ($(this).val().length < 2) { 
     $(this).parent().addClass("has-warning"); 
     nameWarning.show(); 
    } 
    }) 

    /* If the user focuses in we hide the warnings, this is optional */ 
    $("#name").focusin(function() { 
    $(this).parent().removeClass("has-warning"); 
    nameWarning.hide(); 
    }); 

    /******************************* 
    E-mail fom validation 
    ******************************/ 
    $("#email").focusout(function() { 
    if ($(this).val().length === 0) { 
     $(this).parent().removeClass("has-danger"); 
     emailWarning.hide(); 
     validateAllInputs(); 
     console.log("hide the warnings"); 

    } else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) { 
     $(this).parent().removeClass("has-danger"); 
     emailWarning.hide(); 
     console.log("hide the warnings"); 
    } else { 
     $(this).parent().addClass("has-danger"); 
     emailWarning.show(); 
     console.log("show the warnings"); 
    } 
    }) 

    /* If we are inside the form, just hide the warnings as the user is typing.*/ 
    $("#email").focusin(function() { 
    $(this).parent().removeClass("has-danger"); 
    emailWarning.hide(); 
    }); 

これは意図したとおりに動作しますが、問題は私が押されたときに、両方の入力を検証するボタンを追加したいとき、それがあれば提出することができています両方の入力には警告クラスがないため、エラーはなく、「if」は機能しますが、「else」はトリガーされません。何が間違っているのですか？

Answer 1

1 ....これを試してみてください：私は、フォーカスとブラーイベント

2を使用している：あなたが不足しているvalidateAllInputs（）

else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) { 
     $(this).parent().removeClass("has-danger"); 
     emailWarning.hide(); 
     console.log("hide the warnings"); 

var nameWarning = $(".yellow"); 
 
var emailWarning = $(".red"); 
 
$("#submitPaymentButton").prop("disabled", true); 
 

 
emailWarning.hide(); 
 
nameWarning.hide(); 
 

 
$(document).ready(function() { 
 

 
    /**************************** 
 
    Name validation 
 
    ******************************/ 
 
    $("#name").on("blur",function() { 
 
    if ($(this).val().length === 0) { 
 
     $(this).parent().removeClass("has-warning"); 
 
     nameWarning.hide(); 
 
     validateAllInputs(); 
 

 
    } 
 
    else if ($(this).val().length < 2) { 
 
     $(this).parent().addClass("has-warning"); 
 
     nameWarning.show(); 
 
    } 
 
    }) 
 

 
    /* If the user focuses in we hide the warnings, this is optional */ 
 
    $("#name").on("focus",function() { 
 
    $(this).parent().removeClass("has-warning"); 
 
    nameWarning.hide(); 
 
    }); 
 

 
    /******************************* 
 
    E-mail fom validation 
 
    ******************************/ 
 
    $("#email").on("blur", function() { 
 
    if ($(this).val().length === 0) { 
 
     $(this).parent().removeClass("has-danger"); 
 
     emailWarning.hide(); 
 
     validateAllInputs(); 
 
     console.log("hide the warnings"); 
 

 
    } else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) { 
 
     $(this).parent().removeClass("has-danger"); 
 
     emailWarning.hide(); 
 
     validateAllInputs(); 
 
     console.log("hide the warnings"); 
 
    } else { 
 
     $(this).parent().addClass("has-danger"); 
 
     emailWarning.show(); 
 
     console.log("show the warnings"); 
 
    } 
 
    }) 
 

 
    /* If we are inside the form, just hide the warnings as the user is typing.*/ 
 
    $("#email").on("focus",function() { 
 
    $(this).parent().removeClass("has-danger"); 
 
    emailWarning.hide(); 
 
    }); 
 
    
 
    }); 
 

 
function validateAllInputs() { 
 
    if (!$("#name").parent().hasClass("has-warning") && !$("#email").parent().hasClass("has-danger")) { 
 
    $("#submitPaymentButton").prop("disabled", false); 
 
     console.log("disabled"); 
 
    } else { 
 
     $("#submitPaymentButton").prop("disabled", true); 
 
     console.log("enabled") 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset class="form-group"> 
 
    <label for="name">Name</label> 
 
    <input type="text" class="form-control" id="name" placeholder="Name"> 
 
    <div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div> 
 
    </fieldset> 
 
    <!--name--> 
 

 
    <fieldset class="form-group"> 
 
     <label for="email">E-mail</label> 
 
     <input type="email" class="form-control" id="email" placeholder="E-mail"> 
 
     <div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div> 
 
    </fieldset> 
 
    <!--email--> 
 

 
<button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"> Process Payment </button>

あなたの例では条件の下で呼び出します