Javascript form validation errors

Question

I am trying to setup a registration form by using javascript to confirm if the user typed something into each input field. Right now, If I click the submit button, nothing happens :(.

<form name="registration" id="registration">
                <label class="registration-spacing">
                    <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
                </label>
                <label class="registration-spacing">
                    <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
                </label>
            </form>

function registrationValidation() {
        var fName = document.forms["vaidation"].first-name-registration.value;
        var lName = document.forms["validation"].last-name-registration.value;
        var dob = document.forms["validation"].date-of-birth-registration.value;
        var email = document.forms["validation"].email-registration.value;
        var username = document.forms["validation"].username-registration.value;
        var password = document.forms["validation"].password-registration.value;

        if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
            alert("Please fill out all required fields.");
            return false;
        } else {
            window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
            alert("Registration Successful!");
        }
    }

Answer 1

I recommend using this plugin. http://jqueryvalidation.org/ I also recommend you use jQuery.

It is super easy to use and I use it all the time for forms.

This below code works fine.

however you are not validating that the email is valid, that the DOB is valid, that the name is valid (no numbers..ect.) I can register by putting random stuff in each text box.

You can get closer by using the HTML5 built in validators. Ex <input type="email" name="email" required placeholder="Enter a valid email address"> Notice the required attribute. Also the type attribute will force it to be a properly formatted email as well.

Here is a link to the first search result on HTML 5 form validation: http://www.the-art-of-web.com/html/html5-form-validation/

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<form name="registration" id="registration">
    <label class="registration-spacing">
        <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
    </label>
    <label class="registration-spacing">
        <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
    </label>
    <label class="registration-spacing">
        <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
    </label>
    <label class="registration-spacing">
        <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
    </label>
    <label class="registration-spacing">
        <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
    </label>
    <label class="registration-spacing">
        <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
    </label>
    <label class="registration-spacing">
        <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
    </label>
</form>


<script>
    function registrationValidation() {
        var fName = $("#first-name-registration").val();
        var lName = $("#last-name-registration").val();
        var dob = $("#date-of-birth-registration").val();
        var email = $("#email-registration").val();
        var username = $("#username-registration").val();
        var password = $("#password-registration").val();

        if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
            alert("Please fill out all required fields.");
            return false;
        } else {
            window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
            alert("Registration Successful!");
        }
    }
</script>

Answer 2

Due to JavaScript having issues with dashes, put the id of the element in quotes inside brackets. Also the form id is registration not validation.

 function registrationValidation() { var fName = document.forms["registration"]["first-name-registration"].value; var lName = document.forms["registration"]["last-name-registration"].value; var dob = document.forms["registration"]["date-of-birth-registration"].value; var email = document.forms["registration"]["email-registration"].value; var username = document.forms["registration"]["username-registration"].value; var password = document.forms["registration"]["password-registration"].value; if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") { alert("Please fill out all required fields."); return false; } else { window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html"; alert("Registration Successful!"); } } 

 <form name="registration" id="registration"> <label class="registration-spacing"> </label> <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35"> <label class="registration-spacing"> <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35"> </label> <label class="registration-spacing"> <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35"> </label> <label class="registration-spacing"> <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35"> </label> <label class="registration-spacing"> <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35"> </label> <label class="registration-spacing"> <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35"> </label> <label class="registration-spacing"> <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button> </label> </form> 

Answer 3

尝试使用它来获取输入值：

var fName = document.getElementById('first-name-registration').value;