Form validation stops working near end

Question

First thanks in advance for any assistance.

I have eight if statements that validate my form fields. The first six work fine, but the last two do not (I've commented where the validation stops working), as it just reloads the page as if the form was submitted.

Two things I need assistance with... 1) Why my last two if statements don't work, and 2) Is there an easier, less-complicated, more-efficient, BETTER way to validate than this? Could you show me?

Script

 $("#myform").submit(function(){
    // Variables
    var fname=jQuery('#fname').val();
    var emailval=jQuery('#email').val();
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
    var vemail=mailformat.test(emailval);
    var phone = jQuery('#phone').val();


    // ALL THREE FIELDS ARE INVALID
    if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) {
        // Set the border color to red
        document.getElementById("fname").style.borderColor = "#E34234";
        document.getElementById("email").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors
        jQuery('.name_error').show();
        jQuery('.email_error').show();          
        jQuery('.phone_error').show();
        return false;
    } 
    // Name is valid (PHONE & EMAIL IS INVALID) 
    else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length == 0 || vemail==false)) {
        // Ensure the Name Field is styled correctly and the error is hidden
        document.getElementById("fname").style.borderColor = "#ccc";
        jQuery('.name_error').hide();

        // Set the border color to red
        document.getElementById("email").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors
        jQuery('.email_error').show();          
        jQuery('.phone_error').show();
        return false;
    } 
    // Phone is valid (NAME & EMAIL IS INVALID)
    else if ($.trim(fname).length == 0 && $.trim(phone).length > 6 && ($.trim(emailval).length == 0 || vemail==false)) {
        // Ensure the Phone Field is styled correctly and the error is hidden
        document.getElementById("phone").style.borderColor = "#ccc";
        jQuery('.phone_error').hide();

        // Set the border color to red
        document.getElementById("email").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email!</span>');

        // Display the errors
        jQuery('.name_error').show();           
        jQuery('.email_error').show();
        return false;
    }
    // Email is valid (NAME & PHONE IS INVALID)
    else if ($.trim(fname).length == 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure the Email Field is styled correctly and the error is hidden
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.email_error').hide();

        // Set the border color to red
        document.getElementById("fname").style.borderColor = "#E34234";
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors
        jQuery('.name_error').show();           
        jQuery('.phone_error').show();
        return false;
    } 
    // Name is entered and Email is valid (PHONE IS INVALID)
    else if ($.trim(fname).length != 0 && ($.trim(phone).length == 0 || $.trim(phone).length < 7) && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure the Name & Email Fields are styled correctly and the errors are hidden
        document.getElementById("fname").style.borderColor = "#ccc";
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.name_error').hide();
        jQuery('.email_error').hide();

        // Set the border color to red
        document.getElementById("phone").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.phone_error').html('<span style="color:red;"> Please enter a valid Phone Number!</span>');

        // Display the errors       
        jQuery('.phone_error').show();
        return false;
    }
    // Phone has more than 6 characters and Email is valid (NAME IS INVALID)
    else if ($.trim(fname).length == 0 && ($.trim(phone).length != 0 || $.trim(phone).length > 6) && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure the Phone & Email Fields are styled correctly and the errors are hidden
        document.getElementById("phone").style.borderColor = "#ccc";
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.phone_error').hide();
        jQuery('.email_error').hide();

        // Set the border color to red
        document.getElementById("fname").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.name_error').html('<span style="color:red;"> Please enter your First Name!</span>');

        // Display the errors       
        jQuery('.name_error').show();
        return false;
    } 
    // *** HERE DOWN IS WHERE THINGS NO LONGER WORK AS THEY SHOULD *** 
    // Phone has more than 6 characters and Name is entered (EMAIL IS INVALID)
    else if (($.trim(fname).length != 0 && $.trim(phone).length > 6) && ($.trim(emailval).length == 0 || vemail==false)) {
        // Ensure the Name & Phone Fields are styled correctly and the errors are hidden
        document.getElementById("name").style.borderColor = "#ccc";
        document.getElementById("phone").style.borderColor = "#ccc";
        jQuery('.name_error').hide();
        jQuery('.phone_error').hide();

        // Set the border color to red
        document.getElementById("email").style.borderColor = "#E34234";

        // Define the error text
        jQuery('.email_error').html('<span style="color:red;"> Please enter a valid Email Address</span>');

        // Display the errors       
        jQuery('.email_error').show();
        alert(vemail);
        return false;
    } 
    // ALL FIELDS ARE GOOD
    else if ($.trim(fname).length != 0 && $.trim(phone).length > 6 && ($.trim(emailval).length != 0 && vemail != false)) {
        // Ensure all fields are styled correctly and errors are hidden
        document.getElementById("name").style.borderColor = "#ccc";
        document.getElementById("phone").style.borderColor = "#ccc";
        document.getElementById("email").style.borderColor = "#ccc";
        jQuery('.name_error').hide();
        jQuery('.phone_error').hide();
        jQuery('.email_error').hide();

        alert("All is good. We're ready to submit!")
        return false;
    }
    else {

        // ALERT
        alert("None of the validation is working");
        return false;
    }

});

HTML – just the fieldset this pertains to...

    <fieldset>
        <h1 class="fs-title mt16 thick">HEADDER</h1>

        <input type="text" id="fname" name="fname" placeholder="First Name" />
        <div class="name_error"></div>
        <input type="email" id="email" name="email" placeholder="What is your email address?" />
        <div class="email_error"></div>
        <input type="tel" id="phone" name="phone" placeholder="Phone Number (i.e. 5555551212)" />
        <div class="phone_error"></div>
        <label class="option-button uppercase thick"><input type="radio" name="contact" value="email" />Contact me by email</label>
        <label class="option-button uppercase thick"><input type="radio" name="contact" value="phone" checked />Contact me by phone</label>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" name="submit" class="submit action-button" value="Submit" />
    </fieldset>

Thanks @spaceman! This solved the issue of the last two validations not working. :) — Action Author, Apr 28 '16 at 17:24

Rhys Bradbury · Answer 1 · 2016-04-28T17:19:10.320

1

Wowa!

Hey,

You could use the attributes required and pattern.

    <input type="text" id="example" name="example" required pattern="[A-Za-z]{3}"/>

I hope this helps,

Rhys

References:
http://www.w3schools.com/tags/att_input_pattern.asp http://www.w3schools.com/tags/att_input_required.asp

edited Apr 28 '16 at 17:19

answered Apr 28 '16 at 17:13

Rhys Bradbury

1,699
13
24

This would definitely remove a lot of my validation, but the second reference says that it doesn't work with IE9 or Safari??? Additionally, how would I script to add the error text below the field? – Action Author Apr 28 '16 at 17:27
Yes, w3school are correct, what web browser are you working on?Custom error messages: http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message – Rhys Bradbury Apr 28 '16 at 17:30
Thanks! I have several forms to add to this, so am going to try this with the next one and if it works well, will move this one over too. Appreciate the direction! – Action Author Apr 28 '16 at 17:49

score 1 · Accepted Answer · answered Apr 28 '16 at 17:34

Your code hits the final two else if but your next line of code fails for both:

document.getElementById("name").style.borderColor = "#ccc";

because the identifier doesn't exist, it should be fname. The console outputs Cannot read property 'style' of null and as the code fails, false isn't returned so the form tries to submit as normal resulting in a page reload.

You can use the console, (F12 in most browsers), to see these errors. Most will also point you to the line where the error occurs for further evaluation. As the page was reloading you would need to tick the 'Preserve Log' (says this in Chrome, may differ in other browsers) to see them.

score 0 · Answer 3 · answered Apr 28 '16 at 17:13

There is a lot of duplication in your code. There is definitly a better way to do this.

How about something like this:

var fields = [ {
    "value": "First name",
    "type": "text",
    "validation": "not empty"
}, {
    "value": "Email address",
    "type": "text",
    "validation": new RegExp(..)
}, {
    "value": "Phone number",
    "type": "text",
    "validation": "not empty"
}, {
    "value": "Contact",
    "type": "option",
    "values": [ "Contact me by email", "Contact me by phone" ]
    "validation": "any"
} ];

Then generate your form and validation rules based on this specification.

Form validation stops working near end

3 Answers3