Question

这是我的HTML代码：

color_type

这是我的jQuery代码：

<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>

当我按空格式提交时，怎么不警告？我犯了什么错吗？虽然它不会转到其他页面，但它不会提醒用户填写空表格。

有人能帮助我吗？我做了很长时间。

Answer 1

你可以这样做：

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;
}

这将确保不提交空数据，＆amp;会提醒用户。

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进行事件的处理程序分配，选择元素等等。

当我按空表格提交时，该功能不起作用

3 个答案: