CODEWITHSUNDEEP
jqueryhtmlforms
Hercell Yutiko
Hercell Yutiko

Reputation: 35

Form won't validate

So I'm trying to get this form to work properly and it doesn't seem to want to do anything at all. The point of the form is to create a span element with the class of error and a value of "*" if the form is wrong, which doesn't really need to check anything just yet so I think the code for that is alright. But the rest of it is supposed to validate that all inputs are filled in before allowing it to submit, make sure that the nights input is numeric, and then check that the email input matches the emailPattern variable. But it doesn't do anything. If I enter "eeee" in the Nights input box, it just continues submitting the form anyway. What am I doing wrong? Note: This JavaScript is the only one that needs to be edited. I know there's two others included in the HTML, but the only one that needs to be edited is the JavaScript portion here as that's all I need to edit.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reservation request</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="jquery.validate.min.js"></script>
    <script src="additional-methods.min.js"></script>   
    <script src="reservation.js"></script>
</head>

<body>
    <h1>Reservation Request</h1>
    <form action="response.html" method="get"
        name="reservation_form" id="reservation_form">
        <fieldset>
            <legend>General Information</legend>
            <label for="arrival_date">Arrival date:</label>
            <input type="text" name="arrival_date" id="arrival_date" autofocus><br>
            <label for="nights">Nights:</label>
            <input type="text" name="nights" id="nights"><br>
            <label>Adults:</label>
            <select name="adults" id="adults">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>                                                
            </select><br>
            <label>Children:</label>
            <select name="children" id="children">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>                                                
            </select><br>           
        </fieldset>
        <fieldset>
            <legend>Preferences</legend>
            <label>Room type:</label>
            <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp;               
            <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp;
            <input type="radio" name="room" id="suite" class="left last">Suite<br>
            <label>Bed type:</label>
            <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp;
            <input type="radio" name="bed" id="double" class="left last">Double Double<br>
            <input type="checkbox" name="smoking" id="smoking">Smoking<br>
        </fieldset>     
        <fieldset>
            <legend>Contact Information</legend>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name"><br>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email"><br>
            <label for="phone">Phone:</label>
            <input type="text" name="phone" id="phone" placeholder="999-999-9999"><br>
        </fieldset>

        <input type="submit" id="submit" value="Submit Request"><br>

    </form>
</body>
</html>

JavaScript & JQuery

New that still doesn't work but is better organized and more prepared thanks to Richard

$(document).ready(function() {
    var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
    $("input").add("span").addClass("error").value("*"); // adding span with class of error and value of *
    $("#arrival_date").focus;

    $("#submit").click(function(e) { // variable to filter for empty inputs
        var empty = $(this).parent().find("input").filter(function() {
            return $(this).val() === "";
        });
        if (empty.length || 
            $.isNumeric($("#nights").val()) || 
            $("#email").value != emailPattern) {
                e.preventDefault();
            }

       function storeValues(form)  { //function to store cookie values from input boxes
            setCookie("arrival_date", form.arrival_date.value);
            setCookie("nights", form.nights.value);
            setCookie("name", form.name.value);
            setCookie("email", form.email.value);
            setCookie("phone", form.phone.value);
            return true;
        }
    }
}); // end ready

Previously was this

$(document).ready(function() {
    var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
    $("input").add("span").addClass("error").value("*"); // adding span with class of error and value of *
    $("#arrival_date").focus;

    $("#submit").click(function() { // variable to filter for empty inputs
    var empty = $(this).parent().find("input").filter(function() {
        return this.value === "";
    });
    if  ( ($("input").val()) == (empty)) {
        $("form").submit(function (e) { // function to stop submitting form if any values return empty
            e.preventDefault();
        });
    }
    if {
        $.isNumeric($("#nights").val())) { // function to check id nights for being numeric and stopping form if not
            $("form").submit(function (e) {
                e.preventDefault();

            }
        }
    }
    if $("#email").value != emailPattern { // function to stop form if id email does not match variable emailPattern
        $("form").submit(function (e) {
            e.preventDefault();
        }
    }
    $("#submit").click(function() {
        function storeValues(form)  { //function to store cookie values from input boxes
            setCookie("arrival_date", form.arrival_date.value);
            setCookie("nights", form.nights.value);
            setCookie("name", form.name.value);
            setCookie("email", form.email.value);
            setCookie("phone", form.phone.value);
            return true;
        }

    });
}); // end ready

Upvotes: 1

Views: 587

Answers (2)

adriancarriger
adriancarriger

Reputation: 3000

Working JSFiddle

Your line $("input").add("span").addClass("error").value("*"); caused a TypeError, some of your if statements weren't formed properly, and your email validator wasn't accepting some email addresses.

I used this SO answer for the email function:

function validateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
}

To check for empty inputs I used this SO answer which also checks for whitespace.

var $fields = $(".form :input");
var $emptyFields = $fields.filter(function() {
    // remove the $.trim if whitespace is counted as filled
    return $.trim(this.value) === "";
});

Also, I consolidated your validation logic.

New Javascript

$(document).ready(function () {
    $("#arrival_date").focus;
    var $fields = $("#reservation_form").find('input');
    $("#reservation_form").submit(function (e) {
        var $emptyFields = $fields.filter(function () {
            // remove the $.trim if whitespace is counted as filled
            return $.trim(this.value) === "";
        });
        if ($emptyFields.length || !$.isNumeric($("#nights").val()) || !validateEmail($("#email").val())) {
            e.preventDefault();
        }

        function storeValues(form) { //function to store cookie values from input boxes
            setCookie("arrival_date", form.arrival_date.value);
            setCookie("nights", form.nights.value);
            setCookie("name", form.name.value);
            setCookie("email", form.email.value);
            setCookie("phone", form.phone.value);
            return true;
        }
    });

    function validateEmail(email) {
        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        return re.test(email);
    }
});

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26434

The problem lies with this line of code

if ($("input").val()) == (empty)

$("input") returns an HTML collection of input elements, and there are many of them. You have to select an index like $("input")[0] or iterate over the entire collection.

You already had a variable for finding the number of empty input elements. So in this case you would just need to get that number.

There's also a way to make this code much drier. You are calling the same click event handler three different times. Only one call is needed.

You want the validation to fail for three conditions

  1. There are fields that haven't been filled out
  2. The input is a number
  3. The email is valid

Instead of creating three separate conditions, we can combine them into one.

$(document).ready(function() {
    var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
    $("input").add("span").addClass("error").value("*"); // adding span with class of error and value of *
    $("#arrival_date").focus;

    $("#submit").click(function(e) { // variable to filter for empty inputs
        var empty = $(this).parent().find("input").filter(function() {
            return $(this).val() === "";
        });
        if (empty.length || 
            $.isNumeric($("#nights").val()) || 
            $("#email").value != emailPattern) {
                e.preventDefault();
            }

       function storeValues(form)  { //function to store cookie values from input boxes
            setCookie("arrival_date", form.arrival_date.value);
            setCookie("nights", form.nights.value);
            setCookie("name", form.name.value);
            setCookie("email", form.email.value);
            setCookie("phone", form.phone.value);
            return true;
        }
    }
}); // end ready

Upvotes: 1

Related Questions