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!");
        }
    }

If your only intent is to verify the field has a value, why not use the required attribute on the input? — devlin carnate
– devlin carnate, Commented Apr 13, 2016 at 18:57
vaidation !== validation !== registration? Also, hyphen is not allowed character in property names without bracket notation. — Teemu
– Teemu, Commented Apr 13, 2016 at 18:58

Radmation · Accepted Answer · 2016-04-13 19:17:01Z

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>

edited Apr 13, 2016 at 19:17

answered Apr 13, 2016 at 18:55

Radmation

1,5441 gold badge14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Observer Over a year ago

I believe buttons inside forms act the same as a submit button. Due to that it could be that the page is submitting before running your function. You could try attaching an event listener to the button that says to run your function onclick, and submit at the end of the function. (also remove the inline onclick property)

devlin carnate Over a year ago

@Observer - I think you meant your comment to go on the OP's post, not this answer. But either way, a button inside a form does not act the same way as a submit button: jsfiddle.net/vh6kk5zk

Radmation Over a year ago

@Observer submit will redirect to the action you have in the form tag (and post the data to that page), and if you do not have one, they redirect to the same page. Buttons do not do that, in fact they do not do anything unless you tell them too...typically with a click even in jQuery/javascript.

Wowsk · Accepted Answer · 2016-04-13 19:01:53Z

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>

luk492 · Accepted Answer · 2016-04-13 19:01:09Z

-1

Try using this to get the input values:

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

answered Apr 13, 2016 at 19:01

luk492

3684 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript form validation errors

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related