我在驗證HTML格式時發生錯誤

這是我的JavaScript函數。我在驗證HTML格式時發生錯誤

function shortCutValidation() { 

    //var txtObjList = document.getElementsByTagName("input"); 
    //for (var i = 0; i < txtObjList.length; i++) { 
    // if (txtObjList[i].getAttribute("type") == "text" && this.value != "") { 
    //  // success for i+1 textbox 
    // } 
    // else { 
    //  $(txtObjList).closest(".errortext").css("display", "block"); 
    // } 
    //} 

    var data = document.getElementsByClassName("w-input"); 

     if (data.length > 0) { 
      console.log("yes you are in"); 
      for (var i = 0; i < data.length; i++) { 
       var myvalue = document.getElementsByClassName("w-input"); 

       if (myvalue[i].value == '') { 
        console.log("yes value is empty"+myvalue[i].value); 
        $(myvalue[i]).next(".errortext").css("display", "block"); 
       } 
       else { 
        console.log("thats ok"); 
        $(data[i]).next(".errortext").css("display", "none"); 
       } 
       console.log(i); 
      } 

     } 
}

這是我的HTML代碼。

<div class="myformgrp w-clearfix w-col"> 
    <div class="w-col w-col-2 w-col-medium-3 w-col-small-12"> 
     <label for="firstname" class="verticle-centerinline">First Name </label> 
    </div> 
    <div class="w-col w-col-10 w-col-medium-9 w-col-small-12"> 

     <input type="hidden" id="id" name="id" value="" /> 

     <input type="text" class="w-input" name="fname" id="fname" /> 
     <div class="errortext" style="display:none">required field</div> 
    </div> 
</div> 
<div class="myformgrp w-clearfix w-col"> 
    <div class="w-col w-col-2 w-col-medium-3 w-col-small-12"> 
     <label for="firstname" class="verticle-centerinline">Last Name </label> 

    </div> 
    <div class="w-col w-col-10 w-col-medium-9 w-col-small-12"> 
     <input type="text" class="w-input" name="lname" id="lname" /><br /> 
     <div class="errortext" style="display:none">required field</div> 
    </div> 
</div>

的問題是，我無法驗證所有文本框一次，但我的for循環按預期工作。

我使用jQuery來調用shortCutValidation函數。

我想要的是當我調用模糊事件來一次驗證所有文本框並顯示錯誤消息時。

來源

2017-12-18 vaibhav pancholi

嘗試這個

function validateFormOnSubmit(contact) { 
 
    reason = ""; 
 
    reason += validateName(contact.name); 
 
    reason += validateEmail(contact.email); 
 
    reason += validatePhone(contact.phone); 
 
    reason += validatePet(contact.pet); 
 
    reason += validateNumber(contact.number); 
 
    reason += validateDisclaimer(contact.disclaimer); 
 

 
    
 
    if (reason.length > 0) { 
 

 
     return false; 
 
    } else { 
 
     return false; 
 
    } 
 
} 
 

 
// validate required fields 
 
function validateName(name) { 
 
    var error = ""; 
 

 
    if (name.value.length == 0) { 
 
     name.style.background = 'Red'; 
 
     document.getElementById('name-error').innerHTML = "The required field has not been filled in"; 
 
     var error = "1"; 
 
    } else { 
 
     name.style.background = 'White'; 
 
     document.getElementById('name-error').innerHTML = ''; 
 
    } 
 
    return error; 
 
} 
 

 
// validate email as required field and format 
 
function trim(s) { 
 
    return s.replace(/^\s+|\s+$/, ''); 
 
} 
 

 
function validateEmail(email) { 
 
    var error = ""; 
 
    var temail = trim(email.value); // value of field with whitespace trimmed off 
 
    var emailFilter = /^[^@][email protected][^@.]+\.[^@]*\w\w$/; 
 
    var illegalChars = /[\(\)\<\>\,\;\:\\\"\[\]]/; 
 

 
    if (email.value == "") { 
 
     email.style.background = 'Red'; 
 
     document.getElementById('email-error').innerHTML = "Please enter an email address."; 
 
     var error = "2"; 
 
    } else if (!emailFilter.test(temail)) { //test email for illegal characters 
 
     email.style.background = 'Red'; 
 
     document.getElementById('email-error').innerHTML = "Please enter a valid email address."; 
 
     var error = "3"; 
 
    } else if (email.value.match(illegalChars)) { 
 
     email.style.background = 'Red'; 
 
     var error = "4"; 
 
     document.getElementById('email-error').innerHTML = "Email contains invalid characters."; 
 
    } else { 
 
     email.style.background = 'White'; 
 
     document.getElementById('email-error').innerHTML = ''; 
 
    } 
 
    return error; 
 
} 
 

 
// validate phone for required and format 
 
function validatePhone(phone) { 
 
    var error = ""; 
 
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, ''); 
 

 
    if (phone.value == "") { 
 
     document.getElementById('phone-error').innerHTML = "Please enter a phone number"; 
 
     phone.style.background = 'Red'; 
 
     var error = '6'; 
 
    } else if (isNaN(parseInt(stripped))) { 
 
     var error = "5"; 
 
     document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters."; 
 
     phone.style.background = 'Red'; 
 
    } else if (stripped.length < 10) { 
 
     var error = "6"; 
 
     document.getElementById('phone-error').innerHTML = "The phone number is too short."; 
 
     phone.style.background = 'Red'; 
 
    } else { 
 
     phone.style.background = 'White'; 
 
     document.getElementById('phone-error').innerHTML = ''; 
 
    } 
 
    return error; 
 
} 
 

 
function validatePet(pet) { 
 
    if ((contact.pet[0].checked == false) && (contact.pet[1].checked == false) && (contact.pet[2].checked == false)) { 
 
     document.getElementById('pet-error').innerHTML = "Pet required"; 
 
     var error = "2"; 
 
    } else { 
 
     document.getElementById('pet-error').innerHTML = ''; 
 
    } 
 
    return error; 
 
} 
 

 
function validateNumber(number) { 
 
    var num = document.forms["contact"]["number"]; 
 
    var y = num.value; 
 
    if (!isNaN(y)) { 
 

 
     //alert('va'); 
 

 
     if (y < 0 || y > 50) { 
 
      //Wrong 
 
      number.style.background = 'Red'; 
 
      document.getElementById("number-error").innerHTML = "Must be between 0 and 50."; 
 
      var error = "10"; 
 
     } else { 
 
      //Correct 
 
      number.style.background = 'White'; 
 
      document.getElementById("number-error").innerHTML = ""; 
 
     } 
 
     return error; 
 
    } else { 
 
     document.getElementById("number-error").innerHTML = "Must be a number."; 
 
     var error = "3"; 
 
    } 
 
    return error; 
 
} 
 

 
function validateDisclaimer(disclaimer) { 
 
    var error = ""; 
 

 
    if (document.getElementById("disclaimer").checked === false) { 
 
     document.getElementById('disclaimer-error').innerHTML = "Required"; 
 
     var error = "4"; 
 
    } else { 
 
     document.getElementById('disclaimer-error').innerHTML = ''; 
 
    } 
 
    return error; 
 
}

.error { 
 
    color: #990000; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
color: white !important; 
 
} 
 
    
 
input:-moz-placeholder { /* Firefox 18- */ 
 
color: white !important; 
 
} 
 
    
 
input::-moz-placeholder { /* Firefox 19+ */ 
 
color: white !important; 
 
} 
 
    
 
input:-ms-input-placeholder { 
 
color: white !important; 
 
}

<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post"> 
 
    <div> 
 
     <label>First Name</label> 
 
     <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus /> 
 
     <div id="name-error" class="error"></div> 
 
    </div> 
 
    <div> 
 
     <label>Nickname</label> 
 
     <input placeholder="Nickname" type="text" name="nickname" id="nickname" tabindex="2" autofocus /> 
 
    </div> 
 
    <div> 
 
     <label>Email</label> 
 
     <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus /> 
 
     <div id="email-error" class="error"></div> 
 
    </div> 
 
    <div> 
 
     <label>Phone</label> 
 
     <input placeholder="Phone" type="tel" name="phone" id="phone" tabindex="4" autofocus /> 
 
     <div id="phone-error" class="error"></div> 
 
    </div> 
 
    <div> 
 
     <label>I prefer</label> 
 
     <input type="radio" name="pet" id="Dogs" tabindex="5" autofocus />Dogs 
 
     <input type="radio" name="pet" id="Cats" tabindex="6" autofocus />Cats 
 
     <input type="radio" name="pet" id="Neither" tabindex="7" autofocus />Neither 
 
     <div id="pet-error" class="error"></div> 
 
    </div> 
 
    <div> 
 
     <label>My favorite number between 1 and 50</label> 
 
     <input placeholder="Favorite number between 1 and 50" type="text" name="number" id="number" tabindex="8" autofocus /> 
 
     <div id="number-error" class="error"></div> 
 
    </div> 
 
    <div> 
 
     <label>Disclaimer</label> 
 
     <input type="checkbox" name="disclaimer" id="disclaimer" tabindex="9" autofocus />I confirm that all the above information is true. 
 
     <div id="disclaimer-error" class="error"></div> 
 
    </div> 
 
    <div> 
 
     <button type="submit" name="submit" id="submit" tabindex="10">Send</button> 
 
    </div> 
 
</form>

編碼快樂

來源

2017-12-18 06:33:08

說一些事情對你的代碼的工作方式和原因而不是嘗試。 –

請給mycode解決方案 –

我在驗證HTML格式時發生錯誤

回答

相關問題