stackoom
  简体   繁体   中英

Basic JavaScript validation not working

 原文  2014-05-16 13:47:37  1   3    javascript/ html/ forms/ validation

Question

I'm trying to make a simple form with JavaScript validation. It has four fields: title, email address, rating and comments. As far as I know, the code I have here should work to validate the form and I should not be allowed to submit it but whenever I press the submit button none of the prompts appear and the browser submits the form. Could someone let me know where I am going wrong please? I'd imagine there is a simple solution or something I am forgetting but I'm pretty new to this so apologies if it's something very obvious.

The HTML and JavaScript code is: 

       <html>

       <head>   

       <script type="text/javascript">
        function validateForm()
        {           
        var e=document.forms["review"]["Title"].value;
        var s=document.forms["review"]["Email"].value;
        var t=document.forms["review"]["Rating"].value;
        var c=document.forms["review"]["Comments"].value;

        var atsym=s.indexOf("@");
        var dotsym=s.lastindexOf(".");

        if (e==null || e=="") 
    {
     document.getElementById("valAlert").innerHTML="Please Enter a Title";
     return false;
    }

        else if (s==null || s=="" || atsym<1 || dotsym<atsym+2 || dotsym+2>=s.length) 
    {
    document.getElementById("valAlert").innerHTML="That is not a valid email address!";           
    return false;
    }

        else if (t=="0") 
    {
    document.getElementById("valAlert").innerHTML="You must enter a rating";
    return false;
    }

        else if (c==null || c=="") 
    {
    document.getElementById("valAlert").innerHTML="You need to enter some kind of comment.";
    return false;
    }

        else 
    {
    alert ("Your review of " + t + "has been submitted!");
    }
      }

    </script>
    </head>

    <body>
    <div id="valAlert"></div>
        <form name="review" onsubmit="return validateForm()">
        <fieldset>
            Enter Title:
            <input type="text" name="Title">
            </br>
            </br>
            Enter Email Address:
            <input type="text" name="Email">
            </br>
            </br>
            Please Enter Your Rating:
            <select name="Rating">
            <option value="0">(Please select a rating)</option>
            <option value="1S">1 Star</option>
            <option value="2S">2 Stars</option>
            <option value="3S">3 Stars</option>
            <option value="4S">4 Stars</option>
            <option value="5S">5 Stars!</option>
            </select>
            </br>
            </br>
            <textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
            </fieldset>
            </br>
            </br>
        <fieldset>
        <input class="button" type="submit" value="Submit"/>
        </fieldset>
</form>

</body>

3 answers

solution1
 1 ACCPTED  2014-05-16 14:08:54

please make a null value check before doing the operations like below 

var dotsym=s.lastindexOf(".");

Add the null check for variable 's'.Please check the function naming convention below 

obj.lastindexOf(); TO obj.lastIndexOf(".");

solution2
 0  

You've said there were no errors, but you might just be missing them when the form submits and the console is cleared.

If you're using Chrome/Chromium, you can enable breaking on exceptions in the Sources tab of the developer tools (the icon on the far right should be purple or blue):

Chrome开发者工具的屏幕截图

In Firefox, it's in the Debugger Options menu:

Firefox开发人员工具的屏幕截图

菜单

As @Rajesh says, the casing you have on lastindexOf is wrong; it should be lastIndexOf .

Now, let's fix everything else up, starting with formatting: 

<html>
    <head>
        <script type="text/javascript">
        function validateForm()
        {
            var e = document.forms["review"]["Title"].value;
            var s = document.forms["review"]["Email"].value;
            var t = document.forms["review"]["Rating"].value;
            var c = document.forms["review"]["Comments"].value;

            var atsym = s.indexOf("@");
            var dotsym = s.lastIndexOf(".");

            if (e == null || e == "")
            {
                document.getElementById("valAlert").innerHTML = "Please Enter a Title";
                return false;
            }

            else if (s == null || s == "" || atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length)
            {
                document.getElementById("valAlert").innerHTML = "That is not a valid email address!";
                return false;
            }

            else if (t == "0")
            {
                document.getElementById("valAlert").innerHTML = "You must enter a rating";
                return false;
            }

            else if (c == null || c == "")
            {
                document.getElementById("valAlert").innerHTML = "You need to enter some kind of comment.";
                return false;
            }

            else
            {
                alert("Your review of " + t + " has been submitted!");
            }
        }
        </script>
    </head>

    <body>
        <div id="valAlert"></div>

        <form name="review" onsubmit="return validateForm()">
            <fieldset>
                Enter Title:
                <input type="text" name="Title" />
                </br>
                </br>

                Enter Email Address:
                <input type="text" name="Email" />
                </br>
                </br>

                Please Enter Your Rating:
                <select name="Rating">
                    <option value="0">(Please select a rating)</option>
                    <option value="1S">1 Star</option>
                    <option value="2S">2 Stars</option>
                    <option value="3S">3 Stars</option>
                    <option value="4S">4 Stars</option>
                    <option value="5S">5 Stars!</option>
                </select>
                </br>
                </br>

                <textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
            </fieldset>

            </br>
            </br>

            <fieldset>
                <input class="button" type="submit" value="Submit" />
            </fieldset>
        </form>
    </body>

You're missing a DTD and a closing </html> , so add those: 

<!DOCTYPE html>

<html>
    …
</html>

Next, </br> doesn't exist. It's <br /> . 

<form name="review" onsubmit="return validateForm()">
    <fieldset>
        Enter Title:
        <input type="text" name="Title" />
        <br />
        <br />

        Enter Email Address:
        <input type="text" name="Email" />
        <br />
        <br />

        Please Enter Your Rating:
        <select name="Rating">
            <option value="0">(Please select a rating)</option>
            <option value="1S">1 Star</option>
            <option value="2S">2 Stars</option>
            <option value="3S">3 Stars</option>
            <option value="4S">4 Stars</option>
            <option value="5S">5 Stars!</option>
        </select>
        <br />
        <br />

        <textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
    </fieldset>

    <br />
    <br />

    <fieldset>
        <input class="button" type="submit" value="Submit" />
    </fieldset>
</form>

Here: 

var e = document.forms["review"]["Title"].value;
var s = document.forms["review"]["Email"].value;
var t = document.forms["review"]["Rating"].value;
var c = document.forms["review"]["Comments"].value;

the properties are valid JavaScript identifiers, so you can write them with the dot syntax: 

var e = document.forms.review.Title.value;
var s = document.forms.review.Email.value;
var t = document.forms.review.Rating.value;
var c = document.forms.review.Comments.value;

You should probably give them clearer names, too; I think you used the wrong one in that last alert , and this will help: 

var title = document.forms.review.Title.value;
var email = document.forms.review.Email.value;
var rating = document.forms.review.Rating.value;
var comments = document.forms.review.Comments.value;

Next, you don't need else s when you're return ing from the if case no matter what, so you can drop those. The value s of text inputs can never be null , so stop checking for those. It'll also save some typing (or copying) to keep valAlert as a variable. 

var atsym = email.indexOf("@");
var dotsym = email.lastindexOf(".");
var valAlert = document.getElementById("valAlert");

if (title === "") {
    valAlert.innerHTML = "Please Enter a Title";
    return false;
}

if (atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length) {
    valAlert.innerHTML = "That is not a valid email address!";
    return false;
}

if (rating == "0") {
    valAlert.innerHTML = "You must enter a rating";
    return false;
}

if (comments == "") {
    valAlert.innerHTML = "You need to enter some kind of comment.";
    return false;
}

alert("Your review of " + title + " has been submitted!");

Voilà! But wait; there's more. The best things in life web development don't need JavaScript, and this is no exception. 

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 validation</title>
    </head>

    <body>
        <form>
            <fieldset>
                <label>
                    Enter title:

                    <input type="text" name="title" required />
                </label>

                <label>
                    Enter e-mail address:

                    <input type="email" name="email" required />
                </label>

                <label>    
                    Please enter your rating:
                    <select name="rating" required>
                        <option>(Please select a rating)</option>
                        <option value="1S">1 Star</option>
                        <option value="2S">2 Stars</option>
                        <option value="3S">3 Stars</option>
                        <option value="4S">4 Stars</option>
                        <option value="5S">5 Stars!</option>
                    </select>
                </label>

                <textarea name="comments" rows="8" cols="40" placeholder="Comments" required></textarea>
            </fieldset>

            <fieldset>
                <button class="button">Submit</button>
            </fieldset>
        </form>
    </body>
</html>

solution3
 -1  2014-05-16 14:09:37

I beg to differ on your comments. You are getting console errors. Specially, it is erroring out whenever you try to run the parsers on s and s is empty. You need to move the logic into the if clause AFTER you have verified it has a value: 

else if (s == null || s == "") {
    document.getElementById("valAlert").innerHTML = "Please enter an email address";
    return false;
}
else if (s.indexOf("@") < 1 || s.lastindexOf(".") < s.indexOf("@")+ 2 || s.lastindexOf(".")+ 2 >= s.length) {
    document.getElementById("valAlert").innerHTML = "This is not a valid email address!";
    return false;
}

Here is a Fiddle

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question basic JavaScript form validation Basic Javascript validation Basic form validation with Javascript basic form validation not working Basic Form Validation with JavaScript/HTML Basic javascript loop/validation question Basic Input field Validation in Javascript Basic AngularJS Form Validation is not working basic angular form validation not working A basic if/else on javascript not working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM