Javascript & Forms

Question

Im currently trying to do a form that requires the user to enter valid information.

For instance Here's a classic form: jsfiddle

I want the user to put name and address. But I want the button to be unclickable until the user inputs his Name and his Email(in a correct form).

Is there any property that lets me access if a button is unclickable? Something like:

function validateButtonSubmit {
    if (validateEmail(email)) {
        if (validateName(name)) {
            document.getElementById("submitButton").clickable = true;
        }
    }
}

Whats the best way to accomplish this, am I going in the right direction?

You should look into jquery validator, it makes validating input on the client side so much easier than all these if statements (which, assuming your functions are correct, is the proper way to do it, aside from the clickable part, change that to disabled). — Sterling Archer, Oct 04 '13 at 15:55
you can `disable` the submit button. see http://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled — b_dubb, Oct 04 '13 at 16:47
possible duplicate of [Disable/Enable Submit Button until all forms have been filled](http://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled) — b_dubb, Oct 04 '13 at 16:48

score 2 · Accepted Answer · answered Oct 04 '13 at 16:08

2

You could probably shorten this up without the nesting if you wanted:

function validateButtonSubmit() {
    var btnSubmit = document.getElementById("submitButton");
    btnSubmit.disabled = !(validateEmail(email) && validateName(name));
}

answered Oct 04 '13 at 16:08

LukeGeneva

584
1
3
15

score 0 · Answer 2 · answered Oct 04 '13 at 15:54

0

Use disabled:

document.getElementById("submitButton").disabled = true;

answered Oct 04 '13 at 15:54

bfavaretto

71,580
16
111
150

score -1 · Answer 3 · answered Oct 04 '13 at 16:01

-1

You could call removeAttribute() on the element and then call setAttribute after you've validated the form:

var button = document.getElementById('submitButton');
button.removeAttribute('click');
// validation stuff 
button.setAttribute('click', submitForm());

answered Oct 04 '13 at 16:01

Kilmazing

526
7
14

As submit can be bypassed in a number of ways, this is a really bad solution and not easily maintained. Best to use one of the many validation patterns that already exist. – iCollect.it Ltd Feb 08 '16 at 17:30

Javascript & Forms

3 Answers3