문의 양식 유효성 검사 자바 스크립트

Question

어제 정규식을 사용하여 클라이언트 측 유효성 검사를위한 자습서를 진행했습니다. 그것은 대부분의 경우 잘 작동했습니다. 나는이 일을 멈추기 위해 무엇을 바꿨는지 알 수 없다.

기본적으로 유효성 검사를 통과해도 양식이 제출되어야한다고 생각하지 않습니다. 제출을 클릭하고 모든 입력란이 비어 있으면 모두 오류 메시지가 표시되지만 이름 입력란 만 표시됩니다. 오류 메시지가 표시로, 형태는 여전히

HTML을

<form> 

      <div class="form-group"> 
      <label for="contact-name">Name</label> 
      <input type="text" class="form-control" id="contact-name" name="name"  placeholder="Enter your name.." onkeyup='validateName()'> 
      <span class='error-message' id='name-error'></span> 
      </div> 

      <div class="form-group"> 
      <label for="contact-phone">Phone Number</label> 
      <input type="tel" class="form-control" id="contact-phone" name="phone" placeholder="Ex: 1231231234" onkeyup='validatePhone()'> 
      <span class='error-message' id='phone-error'></span> 
      </div> 

      <div class="form-group"> 
      <label for="contact-email">Email address</label> 
      <input type="email" class="form-control" id="contact-email" name="email" placeholder="Enter Email" onkeyup='validateEmail()'> 
      <span class='error-message' id='email-error'></span> 
      </div> 

      <div class="form-group"> 
      <label for='contactMessage'>Your Message</label> 
      <textarea class="form-control" rows="5" id='contact-message' name='message' placeholder="Enter a brief message" onkeyup='validateMessage()'></textarea> 
      <span class='error-message' id='message-error'></span> 
      </div> 

     <button onclick='validateForm()' class="btn btn-default">Submit</button> 
     <span class='error-message' id='submit-error'></span> 
     </form> 

JS 나는이 실제로 PHP에 아무것도를 보내도록 설정되어 있지 않은 이해

function validateName() { 

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

    if(name.length == 0) { 

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

    } 

    if (!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) { 

    producePrompt('First and last name, please.','name-error', 'red'); 
    return false; 

    } 

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

} 

function validatePhone() { 

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

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

    if(phone.length != 10) { 
     producePrompt('Include area code.', '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('contact-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() || !validateMessage()) { 
    jsShow('submit-error'); 
    producePrompt('Please fix errors to submit.', 'submit-error', 'red'); 
    setTimeout(function(){jsHide('submit-error');}, 2000); 
    } 
    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; 


} 

를 제출합니다. JavaScript 코드는 아무것도 변경되지 않았으므로 제대로 작동해야한다고 생각하지만 HTML에는 있습니다.

Answer 1

클릭 이벤트에 return을 추가 실패 할 경우

<button onclick='return validateForm()' class="btn btn-default">Submit</button> 

다음, 기능 false를 반환해야합니다 :

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

당신이 조금 더 자세한 설명 바랍니다 수 fiddle