當我按下空形式

Question

這裏提交的功能不工作是我的HTML代碼：

<form name="myForm" action="userreview.html" onsubmit="return !!(tosubmit() & validateForm())" > 


    <div style="padding-bottom: 18px;">First Name:<span style="color: red;"> </span><br/></div> 
    <input type="text" name="firstname" id="firstname"> 
    <br> 
    <div style="padding-bottom: 18px;">Last Name:<span style="color: red;"> </span><br/></div> 
    <input type="text" name="lastname" id="lastname"> 
    <br> 
    <div style="padding-bottom: 18px;">Review:<span style="color: red;"> </span><br/></div> 
    <textarea id="data_8" ${readonly} name="data_8" style="width : 450px;" rows="10" class="form-control"></textarea> 
    <nav> 
     <fieldset class="rating" name="rate1"> 
      <legend>Please rate:</legend> 
      <input type="radio" id="star5" name="rating" value="5" onchange="test(this)" /><label for="star5" title="Rocks!">★</label> 
      <input type="radio" id="star4" name="rating" value="4" onchange="test(this)" /><label for="star4" title="Pretty good">★</label> 
      <input type="radio" id="star3" name="rating" value="3" onchange="test(this)" /><label for="star3" title="Meh">★</label> 
      <input type="radio" id="star2" name="rating" value="2" onchange="test(this)" /><label for="star2" title="Kinda bad">★</label> 
      <input type="radio" id="star1" name="rating" value="1" onchange="test(this)" /><label for="star1" title="Sucks big time">★</label> 
     </fieldset> 
    </nav> 
    <div style="padding-bottom: 18px;">Would you recommend this product?<span style="color: red;"> *</span><br/> 
     <span><input type="radio" id="data_9_0" name="data_9" value="Yes"/> Yes</span><br/> 
     <span><input type="radio" id="data_9_1" name="data_9" value="No"/> No</span><br/> 
     <span><input type="radio" id="data_9_2" name="data_9" value="I am not sure"/> I am not sure</span><br/> 
     </br> 
     <input type="submit" value="Submit"> 
    </div> 
</form> 
</div> 

這裏是我的jQuery代碼：

<script> 
    function tosubmit() { 
// Getting the value of your text input 
     var mytext = document.getElementById("data_8").value; 

// Storing the value above into localStorage 
     localStorage.setItem("mytext", mytext); 

     localStorage.setItem("stars", stars); 

     return true; 
    } 

    var stars; 
    function test(myInput) 
    { 
     stars = myInput.value; 
//alert(stars); 
    } 
    function validateForm() { 
     var x = document.querySelectorAll("#data_8, #rating, #firstname, #lastname"); 
     if (x == "") { 
      alert("Name must be filled out"); 
      return false; 
     } 
    } 
</script> 

爲什麼當我按下它不提醒用空表單提交？我犯了什麼錯誤嗎？儘管它不會轉到其他頁面，但它不會提醒用戶填寫空表單。

有人可以幫助我嗎？我做了很長時間。

Answer 1

你可以做smothing這樣的：

function empty() { 
var x; 
x = document.getElementById("YourInputId").value; 
if (x == "") { 
    alert("Show an Alert"); 
    return false; 
}; 
} 
return true; 

和

<input type="submit" value="submit" onClick="return empty()" /> 

Answer 2

改變你的HTML代碼的東西是這樣的

<form name="myForm" action="userreview.html" onclick="return formX()" /> 

和你的JS功能

function formX(){ 
var xid; 
xid= document.getElementById("id of html element").value; 
if(xid=="") { 
alert("This is empty data alert"); 
return false; 
}; 
return true; 
} 

這將確保不提交空數據，&將提醒用戶。

Answer 3

你的代碼有一些不準確的地方。假設你要驗證所有的字段，檢查了這一點：

var el = document.getElementById("myForm"), 
 
stars = document.querySelectorAll("input[name='rating']"), 
 
recommendations = document.querySelectorAll("input[name='data_9']"); 
 

 
el.addEventListener("submit", onSubmit, false); 
 
for(var i = 0; i < stars.length; i++) stars[i].addEventListener('click', testStars, false); 
 
for(var i = 0; i < recommendations.length; i++) recommendations[i].addEventListener('click', testRecommendations, false); 
 
function onSubmit(event) { 
 
    var e = event || window.event 
 
    if(!(savetoStorage() && validateForm())) e.preventDefault(); 
 
} 
 
function savetoStorage() { 
 
     var mytext = document.getElementById("data_8").value; 
 
     if(!star || !recommendation || mytext.trim() === '') return false; 
 
     localStorage.setItem("mytext", mytext); 
 
     localStorage.setItem("stars", stars); 
 
     return true; 
 
} 
 
var star = 0, recommendation = false; 
 
function testStars() { 
 
    star = this.value; 
 
} 
 
function testRecommendations() { 
 
    recommendation = this.value; 
 
} 
 
function validateForm() { 
 
    var x = document.querySelectorAll("#data_8, #firstname, #lastname"); 
 
    for(var i = 0; i < x.length; i++) if(!x[i].value || x[i].value.trim() === '') return false; 
 
    return true; 
 
}

<form id="myForm" name="myForm" action="userreview.html"> 
 

 

 
    <div style="padding-bottom: 18px;">First Name:<span style="color: red;"> </span><br/></div> 
 
    <input type="text" name="firstname" id="firstname"> 
 
    <br> 
 
    <div style="padding-bottom: 18px;">Last Name:<span style="color: red;"> </span><br/></div> 
 
    <input type="text" name="lastname" id="lastname"> 
 
    <br> 
 
    <div style="padding-bottom: 18px;">Review:<span style="color: red;"> </span><br/></div> 
 
    <textarea id="data_8" ${readonly} name="data_8" style="width : 450px;" rows="10" class="form-control"></textarea> 
 
    <nav> 
 
     <fieldset class="rating" name="rate1"> 
 
      <legend>Please rate:</legend> 
 
      <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">★</label> 
 
      <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">★</label> 
 
      <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">★</label> 
 
      <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">★</label> 
 
      <input type="radio" id="star1" name="rating" value="1" onchange="test(this)" /><label for="star1" title="Sucks big time">★</label> 
 
     </fieldset> 
 
    </nav> 
 
    <div style="padding-bottom: 18px;">Would you recommend this product?<span style="color: red;"> *</span><br/> 
 
     <span><input type="radio" id="data_9_0" name="data_9" value="Yes"/> Yes</span><br/> 
 
     <span><input type="radio" id="data_9_1" name="data_9" value="No"/> No</span><br/> 
 
     <span><input type="radio" id="data_9_2" name="data_9" value="I am not sure"/> I am not sure</span><br/> 
 
     </br> 
 
     <input type="submit" value="Submit"> 
 
    </div> 
 
</form>

另請注意，您必須對crossbrowserness工作，如果你要堅持到香草。或者只是使用jquery來處理事件的處理程序分配，選擇元素等等。