使用javascript驗證我的html表單時出現錯誤

Question

這是我的javascript函數。

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函數。

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

Answer 1

嘗試這個

 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 = /^[^@]+@[^@.]+\\.[^@]*\\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> 

快樂編碼