javascript - 表单验证未显示

Question

我正在尝试使用表单验证示例中的一些代码并将其定制为我自己的表单，但它似乎不起作用。当用户输入姓名、电话号码或电子邮件不正确时，应该会出现一条消息，例如“请输入有效姓名”。我不太了解 javascript，所以我正在努力寻找问题所在。没有任何控制台问题，如果这可能是一个命名问题？

jsFiddle

HTML

  <form>
  <div class="formColumn2">

    <label for="name">
    <span class="textStyle">Full Name*</span><input type="text" id="name"><br>
    <span id="nameMessage" class="message">You must have a valid name</span>
    </label>

    <label for="email"><span class="textStyle">Email*</span>
    <input type="text" id="email"><br>
    <span id="emailMessage" class="message">You must have a valid email</span>
    </label>

    <label for="phoneNumber">
    <span class="textStyle">Phone Number*</span>
    <input type="text" id="phoneNumber"><br>
    <span id="phoneMessage" class="message">You must have a valid phone number</span>
    </label>

      <input type="submit" id="submit" value="Submit">

 </div>
     </form>

CSS

.textStyle {
width: 150px;
display: inline-block;
}

.formColumn2 {
margin-top:-80px;
margin-left: 50px;
}

select{
width:200px;
margin:10px 0;
}


input[type=text],
input[type=password]{
width:200px;
margin:10px 0;
}


.message{
display: none;  
}

input[type=submit]{
background: #fff;
border: 1px solid black;
cursor: pointer;
}

input[type=text].error,
input[type=password].error{
border: 3px solid red;
color: red; 
}

Javascript

var nameInput = document.querySelector('#name');
var emailInput = document.querySelector('#email');
var phoneInput = document.querySelector ('#phoneNumber');

function displayError(fieldname, message) {
    var input_field = document.querySelector('#' + fieldname);
    var error_box = document.querySelector('#' + fieldname + 'Message');

    addClass (input_field, 'error');

    error_box.style.display = 'block';
    error_box.innerHTML = message;

}

function hideError(fieldname){
    var input_field = document.querySelector('#'+fieldname);
    var error_box = document.querySelector('#'+fieldname+'Message');
    removeClass (input_field, 'error');
    error_box.style.display = 'none';
}

function addClass(html_element,class_str) {
    if(html_element.className.indexOf(class_str) == -1){
        html_element.className += ' '+class_str;
    }
}

function removeClass(html_element, class_str){
    if(html_element.className.indexOf(class_str) != -1){
        html_element.className = html_element.className.replace(class_str, '');
    }
}

nameInput.onblur = function(){
    if(!nameInput.value){
        valid = false;
        displayError('name', 'Please enter your name'); 
    }else if(!isValidName(nameInput.value)){
        valid = false;
        displayError('name', 'That name has invalid characters');
    }else{
        hideError('name');
    }

    emailInput.onblur = function(){
    if(!emailInput.value){
        valid = false;
        displayError('email', 'Please enter your email');
    }else if(!isValidEmail(emailInput.value)){
        valid = false;
        displayError('email', 'The email field is invalid');
    }else{
        hideError('email');
    }
}

phoneInput.onblur = function(){
    if(!emailInput.value){
        valid = false;
        displayError('phone', 'Please enter your number');
    }else if(!isValidEmail(emailInput.value)){
        valid = false;
        displayError('email', 'The phone number field is invalid');
    }else{
        hideError('phone');
    }
}

submitButton.onclick = function(){

    var valid = true;

    return valid;
}

function isValidName(str){
    var namePattern = new RegExp('^[a-zA-Z \s\'-]{1,}$');

    return namePattern.test(str);
}

function isValidEmail(str) { 
    var emailPattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return emailPattern.test(str);
} 

Answer 1

如果你将使用 jQuery，它会更简单。

如果你需要的话

$('.formClass').validate();

在 html 中 只需将 required 放在文本字段中，您希望它们不为空。

<form class="formCLass">
    <input type="text" name="username" required/>
        <input type="email" name="email" required/>
</form>