CODEWITHSUNDEEP
jquery
user2526749
user2526749

Reputation: 41

Validation with button press as well as enter key

I"m new to jquery so I've read a few examples here on stackoverflow of how to validate a form with a click on a button as well as pressing Enter and followed them. For some reason, my code doesn't work. Could you explain me there are my mistakes? Thanks in advance!

$(document).keyup(function(event) {
    if(event.keyCode == 13){
    $("#clickButton").click(function () {
        var username = document.forms["form1"]["username"];
        var password = document.forms["form1"]["password"];
        var numbers = /^[0-9]+$/;
        if (username.value == "" || password.value == "") {
            alert("Data missing");
        } else if (username.value.match(numbers)) {
            alert('Data not valid');
        } else {
            alert("Your password is " + password.value);
        }
    });
}
});

Upvotes: 1

Views: 1817

Answers (3)

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

it should be

DEMO

$("#clickButton").click(function () {
    var username = document.forms["form1"]["username"];
    var password = document.forms["form1"]["password"];
    var numbers = /^[0-9]+$/;
    if (username.value == "" || password.value == "") {
        alert("Data missing");
    } else if (username.value.match(numbers)) {
        alert('Data not valid');
    } else {
        alert("Your password is " + password.value);
    }
});

$('input').keyup(function(event) {
if(event.keyCode == 13){
    $("#clickButton").click();
}
});

Upvotes: 2

adeneo
adeneo

Reputation: 318212

You're binding a click inside a keyup, so everytime the enter key is pressed, a new click handler is bound, which is a no-no.

$('#formId input').on('keyup', function(event) {
    if(event.which === 13) {
        event.preventDefault();
        validate();
    }
});

$("#clickButton").on('click', function(event) {
    event.preventDefault();
    validate();
});

function validate() {
    var username = $("#username"), // give elements ID's
        password = $("#password");

    if (username.val() == "" || password.val() == "") {
        alert("Data missing");
    } else if (username.val().match(/^[0-9]+$/)) {
        alert('Data not valid');
    } else {
        alert("Your password is " + password.val());
        document.getElementById('formId').submit();
    }
}

A much simpler soultion would be to just bind the validation to the form submit event, as that is triggered both when the submit is clicked, and when enter is pressed in an input:

$('#formId').on('submit', function(e) {
    e.preventDefault();
    var username = $("#username"), // give elements ID's
        password = $("#password");

    if (username.val() == "" || password.val() == "") {
        alert("Data missing");
    } else if (username.val().match(/^[0-9]+$/)) {
        alert('Data not valid');
    } else {
        alert("Your password is " + password.val());
        this.submit();
    }
});

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 121998

Just remove the click function 

$(document).keyup(function(event) {
    if(event.keyCode == 13){      
        var username = document.forms["form1"]["username"];
        var password = document.forms["form1"]["password"];
        var numbers = /^[0-9]+$/;
        if (username.value == "" || password.value == "") {
            alert("Data missing");
        } else if (username.value.match(numbers)) {
            alert('Data not valid');
        } else {
            alert("Your password is " + password.value);
        }

}
});

Upvotes: 0

Related Questions