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関数を呼び出します。

私が欲しいのは、すべてのテキストボックスを一度に検証するためにblurイベントが呼び出され、エラーメッセージが表示されることです。

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>

どのように、なぜその仕事ではなく、あなたのコードについていくつかのことを言って、これを試してください