Adding Span with Class to a input tag with Jquery

Question

I am trying to add a Span after my Input that will have the class "error" and the text "test".

I've tried the append, and insertAfter methods. I can get the code to work on jsfiddle but I cannot get the code to work on my application.

I have put the HTML and JS/Jquery below. My end result would have a Span (with the class error) next to each input with the type text. I would then set a value for this span based on a validation loop.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zito - Lab 7</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="reservation.js" type="text/javascript"></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>

JS/JQuery

    $(document).ready(function() {
var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
var phonePattern = /\b(\d{3})([-])(\d{3})([-])(\d{4})\b/;
var datePattern =  /\b(0[1-9]|1[012])([/])(0[1-9]|1[0-9]|2[0-9]|3[01])([/])((20)\d\d)\b/;

$(":text").after("<span class='error'>*</span>");
$("#arrival_date").focus();

$("#reservation_form").submit(
    function(event) {
        var isValid = true;

        // validate arrival date
        var arrivalDate = $("#arrival_date").val();
        if (arrivalDate == "") {
            $("#arrival_date").next().text("This field is required");
            isValid = false;
        } else if (!datePattern.test(arrivalDate)) {
            $("#arrival_date").next().text("Must be in the format 12/12/2012");
            isValid = false;
        } else {
            $("#arrival_date").next().text("");
        }

        // validate nights
        var nights = $("#nights").val();
        if (nights == "") {
            $("#nights").next().text("This field is required");
            isValid = false;
        } else if ((isNaN(parseInt(nights))) || (parseInt(nights) <=0)) {
            $("#nights").next().text("This field must be a number and not zero");
            isValid = false;
        } else {
            $("#nights").next().text("");
        }

        // validate name
        var name = $("#name").val();
        if (name == "") {
            $("#name").next().text("This field is required");
            isValid = false;
        } else {
            $("#name").next().text("");
        }

        // validate email
        var email = $("#email").val();
        if (email == "") {
            $("#email").next().text("This field is required");
            isValid = false;
        } else if (!emailPattern.test(email) ) {
            $("#email").next().text("Must be a valid email address.");
            isValid = false;
        } else {
            $("#email").next().text("");
        }

        // validate phone
        var phone = $("#phone").val();
        if (phone == "") {
            $("#phone").next().text("This field is required");
            isValid = false;
        } else if (!phonePattern.test(phone) ) {
            $("#phone").next().text("Must be in the format 999-999-9999");
            isValid = false;
        } else {
            $("#phone").next().text("");
        }


        if (isValid == false) {
            event.preventDefault();
            $("#arrival_date").focus();
        }
    }
);


}); // end ready

Not sure I understand the question? I've uploaded it to my FTP site and it wont work there. dsu-class.com/zito82/lab07 — Phi
– Phi, Commented Mar 8, 2015 at 3:41
EXACTLY, I can't figure out why it is not rendering on the site though? — Phi
– Phi, Commented Mar 8, 2015 at 3:43
Cut it down to code referenced above and its still not working — Phi
– Phi, Commented Mar 8, 2015 at 3:49
Can you try on your live site since the fiddle works fine jsfiddle.net/j08691/xebzdep6? — j08691
– j08691, Commented Mar 8, 2015 at 3:51
Yep, trying on the site and it's not working. Not sure if I should delete the question and repost. It seems the error is not with the code but is with something else. — Phi
– Phi, Commented Mar 8, 2015 at 10:48

jimmy jansen · Accepted Answer · 2015-03-08 04:48:06Z

2

Most easy way is to add a Div container around the form and just append the warning to that. To effectively append after an element you need to give it a class or id.

var email = $("#email"); //using class instead of input:text
var html = "<span class='error'>TEST!</span>"
email.after( html );

But I personally would like something like this better:

var generateError = function(){
var html = "<div id='error' style='top: 0; left:0; width:100%; height: 50px; background-color: red; text-allign: center; display:none; z-index: 100;'> ERROR!!</div>"
$(body).append( html );
}

var showError = function( text ){
var err = $("#error");
err.html( text );
err.show(500).delay(2000).hide(500); 
}

Code is fairly self-explaining, but this will make two functions: generateError and showError.
generateError you need to call before you want to show the error, possibly when the page loads it will add a small header on top of all you other elements and will appear hidden.
showError uses a text argument with the error you want to show. Then it will set the text to the div and show it for two seconds.

This then is more what you are looking for?

$(document).ready(function () {
    var input = $("input");
    var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;

    input.keypress(function (ele) {
        // if regex.test( input ) === false
        createErrors(ele.target);
    })
});

var createErrors = function (ele) {
    $('<span>TEST!</span>').insertAfter(ele);

    $("#arrival_date").focus();
};

This works on keypress, that means the regex gets checked every time a key is pressed. It also passes the element where the user is typing as parameter, this means that you wont get errors for all input:text, but only for the ones where there is an error.

Updated Fiddle (still not perfect, but if its an school exercise this will help you to finish it :)

edited Mar 8, 2015 at 4:48

answered Mar 8, 2015 at 4:03

jimmy jansen

6324 silver badges12 bronze badges

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

6 Comments

j08691 Over a year ago

Why is this necessary when the fiddle shows that the code already works?

j08691 Over a year ago

Read the comments below the question.

jimmy jansen Over a year ago

No offense but then is my solution still a better option because the fiddle shows error behind EVERY input, while it should only show at the ones where a mistake/error has been made. My solution is then also not complete because I dont check...

Phi Over a year ago

I know there are better ways but this is a school lab so i have to follow the instructions.

jimmy jansen Over a year ago

Updated my answer, this should probably help you better :)

|

Collectives™ on Stack Overflow

Adding Span with Class to a input tag with Jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related