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>

表格验证未显示

1 个答案: