Form validation in the input with jQuery

Question

I'm trying to validate a form but with no labels, all the messages in the same input.

I have the html that works as I want but with the jQuery I have problems with the elseif and else.

I am trying to say:
- if the input name is still name give the message name is missing (this seems to work)
- if the input address is still address give the message address is missing (it does not work)
- if the input address and the input name are not address or name submit the form (it does not work)

I have the example here: http://jsfiddle.net/4ervc/20/

HTML:

<form id="form" action="#">
    <input type="text" name="name" id="name" value="name" 
    onfocus="if (this.value=='name'||'name is missing') this.value = '';" 
    onblur="if (this.value=='') this.value = 'name';"  />
    <br />

    <input type="text" name="address" id="address" value="address" 
    onfocus="if (this.value=='address'||'address is missing') this.value = '';" 
    onblur="if (this.value=='') this.value = 'address';"  />
    <br />

    <input type="submit" name="submit" id="submit">
</form>

JQUERY:

$(function(){

    $("#form").submit(function (e) {

        if ($('#name').val("name")) {
            e.preventDefault();
            $('#name').val("name is missing");
        }else if ($('#address').val("address")) {
            e.preventDefault();
            $('#address').val("address is missing");
        }else{
             $("#form").submit;
        }

    });

})

Markomafs · Accepted Answer · 2012-10-16 15:01:14Z

1

you are setting a value "name"

try to use this:

$('#name').val() == "name"

inside you if statement

edited Oct 16, 2012 at 15:01

answered Oct 16, 2012 at 14:55

Markomafs

5464 silver badges19 bronze badges

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

2 Comments

Markomafs Over a year ago

because you change de message to.. you have to change only de if condition like this jsfiddle.net/4ervc/22

Nrc Over a year ago

Ok, now I understand. Thank you!. This is one of the mistakes that I had in my code

KP. · Accepted Answer · 2012-10-16 15:13:59Z

0

A few issues with your original code:

Your submit call $("#form").submit; was incorrect, should be $("#form").submit();
Because you were using if-elseif logic, your validation was only validating the address field if the name field was correct. It should validate all fields every time.
You should compare field values using $('#name').val() === 'name', not $('#name').val('name')

The below fixes these things by using a simple flag, and checking each field separately. The submit call is also fixed.

Try this: http://jsfiddle.net/4ervc/21/

$(function() {

    $("#form").submit(function(e) {

        //assume valid form
        var valid = true;
        if ($('#name').val() === 'name') {
            e.preventDefault();
            $('#name').val('name is missing');
            valid = false;
        }

        if ($('#address').val() === 'address') {
            e.preventDefault();
            $('#address').val('address is missing');
            valid = false;
        }

        if (valid) {
            $('#form').submit();
        }

    });
});

Also - just a note on code smell - you should try to use either single or double quotes consistently through your script. You've used a bit of both which isn't ideal (but will work).

edited Oct 16, 2012 at 15:13

answered Oct 16, 2012 at 14:59

KP.

13.8k3 gold badges43 silver badges60 bronze badges

1 Comment

Nrc Over a year ago

You are wright! This is vey well done and well explained. Thank you so much. Just one last thing: how can I validate in this case the e-mail? something like: if the field has @ and .

Collectives™ on Stack Overflow

Form validation in the input with jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related