The function does not work when i press submit with empty form

Question

Here is my HTML Code :

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

Here is my jQuery Code :

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

How come it does not alert when I press submit with empty form? Did I make any mistake? Although it does not go to the other page but it does not alert the user to fill in the empty form.

Can someone help me? I been doing for quite long.

Answer 1

You can do smothing like this:

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

and

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

Answer 2

change your html code to something be like this

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

and your JS function to

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

This will make sure not to submit empty data, & will alert user.

Answer 3

There are some inaccuracies in your code. Assuming that you want to validate all the fields, check this out:

 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> 

Also notice that you will have to work on crossbrowserness if you want to stick to Vanilla. Or just use Jquery for events' handlers assignment, selecting elements and so on.