Problems With JQuery Select Validation

Question

Hello I'm quite new to JQuery & I'm having trouble getting the validation to work proper with a contact form tutorial i followed that did not include a select box.

Here is the JQuery code:

$(".txtbar, .txtbox").live("focus", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');
    var pxlchange = '-145px';

    if (currid == "contactnumber") {
        pxlchange = '-145px';
    }
    if (currid == "message") {
        pxlchange = '-145px';
    }

    rowbox.addClass('colors');


    thelabel.animate({
        left: pxlchange
    }, 350, 'linear', function () {
        // animation complete
    });

    infobox.animate({
        opacity: 1.0
    }, 350, 'linear', function () {
        // animation complete
    });


    $(this).live("keyup", function () {
        var theval = $(this).val();
        var value = $("subject").val();
        var limitval = 3;
        var replacehtml = "";
        var nameinfohtml = "Not a valid Name!";
        var emailinfohtml = "Not a valid E-mail address!";
        var contactnumberinfohtml = "This field is optional!";
        var subjectinfohtml = "Not a valid subject!";
        var messageinfohtml = "Please fill this field out!";


        if (currid == "name") {
            replacehtml = nameinfohtml;
        } else if (currid == "email") {
            replacehtml = emailinfohtml;
        } else if (currid == "contactnumber") {
            replacehtml = contactnumberinfohtml;
            limitval = 9;
        } else if (value == '0') {
            replacehtml = subjectinfohtml;

        } else if (currid == "message") {
            replacehtml = messageinfohtml;
            limitval = 10;
        }



        // checking against e-mail regex
        if (currid == "email") {
            if (checkValidEmailAddress(theval)) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (!checkValidEmailAddress(theval)) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        } else {
            // we use this logic to check for name+message fields
            if (theval.length >= limitval) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (theval.length < limitval) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }                
       // we use this logic to check the subject
            if (value.val() !== '0') {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (value.val() == '0') {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        }


        // now we check if we can display the send button
        // much easier to just look for 'good class on the req fields
        if ($('#name').next().hasClass('good') && $('#email').next().hasClass('good') && $('#message').next().hasClass('good')) {
            // if all 3 boxes are good then we display our send button!
            // jquery validation complete
            $('#sendbtn').animate({
                opacity: 1.0
            }, 200, 'linear', function () {
                // display submitbtn animation complete
            });
        }
    });
});

$(".txtbar, .txtbox").live("blur", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');

    rowbox.removeClass('colors');

    infobox.animate({
        opacity: 0
    }, 400, 'linear', function () {
        // animation complete
    });
});

Here is my JSfiddle attempt at making it work.

Basically im just trying to get it to find the value "0" and add a class of "good" so it will read the accept message when u pick a subject, I have read a lot of ways how to do this but im not quite sure how to incorporate it this script.

thank you for your time all help is very much appreciated.

hope you didn't close the problem in your mind. since your real problem is your value never be used correctly . the Accepted add to select is handled by this code if (theval.length >= limitval) { infobox.html("Accepted!"); infobox.addClass('good'); } — leonhart
– leonhart, Commented Jun 19, 2013 at 1:53

leonhart · Accepted Answer · 2013-06-19 00:55:43Z

1

the $("subject").val(); should be $("#subject").val();

you have to add # to select with id in jquery

EDIT:

and you already assign var value = $("#subject").val(); , but you call it if (value.val() !== '0') later, this will result in undefined. you should call if (value !== '0') {

edited Jun 19, 2013 at 0:55

answered Jun 19, 2013 at 0:48

leonhart

1,2017 silver badges12 bronze badges

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

4 Comments

Desolate Over a year ago

I dont think the problem lies within $("subject").val; I believe it is when it goes to if (value.val() !== '0') { infobox.html("Accepted!"); infobox.addClass('good'); I did try $("#subject").val; made no difference.

Desolate Over a year ago

also have change (value.val() !== '0') that was me attempting just to by pass.. no luck.

Desolate Over a year ago

take a look at the JSfiddle and you will see what i mean.

leonhart Over a year ago

@user2499178 also need change the if (value == '0') and keyup, see this jsfiddle

Joshua Burns · Accepted Answer · 2013-06-19 01:08:54Z

0

Two issues:

var value = $("subject").val(); should be: var value = $("#subject").val();
$(this).live("keyup", function () { should be: $(this).live("keyup change", function () {

That should solve your problem, it worked for me.

Here is the jsFiddle I modified: http://jsfiddle.net/MpTbT/

answered Jun 19, 2013 at 1:08

Joshua Burns

8,6725 gold badges52 silver badges63 bronze badges

6 Comments

Desolate Over a year ago

Your jsfiddle was not updated. But i tried what you suggested and got it to work.. cant believe it was that simple appreciate it! thank you Joshua

Joshua Burns Over a year ago

not a problem, glad i could help! the keyup event wasn't getting fired because that's a keyboard action while the select requires a sort of selection action. change is called on a text box when your cursor moves out of the box, and is called on a select when you click on an option.

Desolate Over a year ago

thank you for you knowledge and help :) i was completely looking in the wrong area.. Now to try on a registration form.

leonhart Over a year ago

@user2499178 although your problem seems been solved, I still insist on the value.val() !== '0' problem. if you add a console.log(value.val()) before your if else about value.val(), you will get an error. it still seems work just because theval.length >= limitval make it work. your code about value never do the real work. if you don't believe, try remove the if else about value.val(), it will still do the work you want.

leonhart Over a year ago

@user2499178 and your var value = $("subject").val(); doesn't cause a problem for the same reason: it never do real work.

|

Collectives™ on Stack Overflow

Problems With JQuery Select Validation

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related