フォームの検証がサブミットで機能しない

Question

フォームを送信した後、入力フィールドの横にエラーが表示されず、ページが更新されてすべてのフィールドがクリアされます。

HTML：

<form id="mc-form" method="POST"> 
    <div class="form-group col-xs-12 "> 
    <label for="name" hidden>שם פרטי</label> 
    <input type="text" name="name" id="name" class="cv form-control" placeholder="שם פרטי" onkeyup='validateMessage()'> 
    <span class='error-message' id='name-error'></span> 

    </div> 
    <div class="form-group col-xs-12 "> 
    <label for="lastName" hidden>שם משפחה</label> 
    <input type="text" name="lastName" id="lastName" class="cv form-control" placeholder="שם משפחה" onkeyup='validateMessage()'> 
    <span class='error-message' id='name-error'></span> 
    </div> 
    <div class="form-group col-xs-12 "> 
    <label for="phone" hidden>טלפון</label> 
    <input type="text" name="phone" id="phone" class="cv form-control" placeholder="טלפון" onkeyup='validateMessage()'> 
    <span class='error-message' id='name-error'></span> 
    </div> 
    <div class="form-group col-xs-12 "> 
    <label for="email" hidden>דואר אלקטרוני</label> 
    <input type="email" name="email" id="email" class="cv form-control" placeholder="דואר אלקטרוני" onkeyup='validateMessage()'> 
    <span class='error-message' id='name-error'></span> 
    </div> 
    <div class="form-group col-xs-12 "> 
    <label for="subject" hidden>נושא</label> 
    <input type="text" name="subject" id="subject" class="cv form-control" placeholder="נושא" onkeyup='validateMessage()'> 
    </div> 
    <div class="form-group col-xs-12 "> 
    <label for="message" hidden>הודעה</label> 
    <textarea name="message" id="message" class="cv form-control message" placeholder="השאירו את הודעתכם פה" rows="4" cols="50" onkeyup='validateMessage()'></textarea> 
    </div> 
    <!-- <input type="submit" id="submit-button" class="btn btn-custom-outline " value="שלח" > --> 
    <button onclick='return validateForm()' class="btn btn-custom-outline " id="submit-button">שלח</button> 
    <span class='error-message' id='submit-error'></span> 

    <br> 
    <!-- <div class="success"><?= $success ?></div>--> 
    <!--<span class="error"></span> --> 
</form> 

私はJavaScript：

私のscripsはindex.htmlの中にある

function validateName() { 

    var name = document.getElementById('name').value; 

    if(name.length == 0) { 

    producePrompt('Name is required', 'name-error' , 'red') 
    return false; 

    } 

    if (!name.match(/^[a-zא-ת]+(\s[a-zא-ת]+)*$/i)) { 

    producePrompt('Letters only please.','name-error', 'red'); 
    return false; 

    } 

    producePrompt('Valid', 'name-error', 'green'); 
    return true; 

} 

function validatePhone() { 

    var phone = document.getElementById('phone').value; 

    if(phone.length == 0) { 
     producePrompt('Phone number is required.', 'phone-error', 'red'); 
     return false; 
    } 

    if(!phone.match(/^[0-9]{10}$/)) { 
     producePrompt('Only digits, please.' ,'phone-error', 'red'); 
     return false; 
    } 

    producePrompt('Valid', 'phone-error', 'green'); 
    return true; 

} 

function validateEmail() { 

    var email = document.getElementById('email').value; 

    if(email.length == 0) { 

    producePrompt('Email Invalid','email-error', 'red'); 
    return false; 

    } 

    if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) { 

    producePrompt('Email Invalid', 'email-error', 'red'); 
    return false; 

    } 

    producePrompt('Valid', 'email-error', 'green'); 
    return true; 

} 

/*function validateMessage() { 
    var message = document.getElementById('contact-message').value; 
    var required = 30; 
    var left = required - message.length; 

    if (left > 0) { 
    producePrompt(left + ' more characters required','message-error','red'); 
    return false; 
    } 

    producePrompt('Valid', 'message-error', 'green'); 
    return true; 

}*/ 

function validateForm() { 
    if (!validateName() || !validatePhone() || !validateEmail()) { 
     jsShow('submit-error'); 
     producePrompt('Please fix errors to submit.', 'submit-error', 'red'); 
     setTimeout(function(){jsHide('submit-error');}, 2000); 
     return false; 
    } 
    else { 

    } 

} 

function jsShow(id) { 
    document.getElementById(id).style.display = 'block'; 
} 

function jsHide(id) { 
    document.getElementById(id).style.display = 'none'; 
} 




function producePrompt(message, promptLocation, color) { 

    document.getElementById(promptLocation).innerHTML = message; 
    document.getElementById(promptLocation).style.color = color; 


} 

、同じページのフォームは、最終的には、次のとおりです。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script> 
     <script src="js/bootstrap.min.js" ></script> 
      <!-- [ SLIDER SCRIPT ] --> 
     <script type="text/javascript" src="js/SmoothScroll.js"></script> 
     <script src="js/script.js" ></script> 
     <script src="js/validateform.js" ></script> 

クリックした後、入力フィールドの横にエラーが発生していないフォームを送信すると、ページがリフレッシュされ、すべてのフィールドがクリアされます。

Answer 1

あなたは

あなたがそれらはすべて同じIDを持つID email-error持つ要素がないと、エラーが発生している name-errorを渡していません

producePrompt('Email Invalid','email-error', 'red');

や他の呼び出しでに実行されている問題。エラーがスローされると、falseの代わりにundefinedが返され、フォームが送信されます。

Chromeデベロッパーツールを使用している場合、設定に入り、preserve logにチェックすると、ページが更新された後でもエラーが表示されます。代わりに、ちょうど最初の1のすべてのエラーをチェックするよう

...ここ

if (!validateName() || !validatePhone() || !validateEmail()) { またはステートメントは、偽の残りがチェックされなくなり最初のものを意味します。代わりに、あなたは、次のような何かを行うことができ

var vn = validateName(); 
var vp = validatePhone(); 
var ve = validateEmail(); 

if (!vn || !vp || !ve) {