CODEWITHSUNDEEP
jqueryhtmltext
fjw
fjw

Reputation: 107

Validation of input does not output correctly

I am on my way to learning Javascript. I created a form which looks like this: 

    <form method="post" action="#">
       <input type="text" name="name" placeholder="Bitte verrate uns Deinen Namen."  id="anfrage-name"/>
       <input type="email" name="email" placeholder="Und nun Deine E-Mail-Adresse..." id="anfrage-email"/>
       <textarea name="message" placeholder="...gefolgt von Deiner Nachricht an uns." rows="6" id="anfrage-kaufen"></textarea>               
       <input type="submit" class="send-button" value="Anfragen" id="anfrage-abschicken"/>
       <span id="error-message"></span>
    </form>

In JQuery I am going to validate the Email:

$(document).ready(function(e) {
    $('#anfrage-abschicken').click(function() {
        var sEmail = $('#anfragen-email').val();
        if ($.trim(sEmail).length == 0) {
            //no email
            $('#error-message').text('Du musst dieses Feld ausfüllen.');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            // email format right
            return true;
        }
        else {
            // wrong email format
            $('#error-message').text('Dein E-Mail-Format stimmt nicht.');
            e.preventDefault();
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}

Unfortunately, it is not working. How can I get this to work? Here is my JSFIDDLE

Upvotes: 0

Views: 69

Answers (4)

dfsq
dfsq

Reputation: 193311

When you submit a form use onsubmit event. It's a wrong approach to listen button onclick event. onsubmit event automatically responds to Enter key form submission:

$('form').submit(function (e) {
    var sEmail = $('#anfrage-email').val();

    if ($.trim(sEmail).length == 0) {
        //no email
        $('#error-message').text('Du musst dieses Feld ausfüllen.');
        e.preventDefault();
        return false;    // <-- stop further validation
    }

    if (!validateEmail(sEmail)) {
        // wrong email format
        $('#error-message').text('Dein E-Mail-Format stimmt nicht.');
        e.preventDefault();
    }
});

Also you passed event object e to the wrong function. So this:

$(document).ready(function(e)

should be

$(document).ready(function(e) {
    $('form').submit(function (e) {
    ...

Another mistake: your jQuery selector should be $('#anfrage-email').val(); not #anfragen-email.

Demo: http://jsfiddle.net/gW377/5/

Upvotes: 3

lante
lante

Reputation: 7336

Note that you are requesting for $('#anfragen-email') and your element is called anfrage-email

After that, you can replace e.preventDefault(); with return false to achieve the same goal (and this way it will work).

The remaining code seems to be right:

http://jsfiddle.net/gW377/3/

Upvotes: 1

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

You had a couple of errors on you selectors 

 var sEmail = $('#anfragen-email').val();

Should be:

 var sEmail = $('#anfrage-email').val();

Since you don't have an element with that id in you DOM

And you need to pass the event object e in the click event.

 $('#anfrage-abschicken').click(function(e) {

Fiddle

Upvotes: 0

Adam
Adam

Reputation: 6773

Your button is also the submit button for the form. I'd suggest starting by binding to the submit event for the form rather than the button click. More generally, try the jQuery Validatory plugin which will do much of this for you.

Upvotes: 0

Related Questions