how to validate input fields on change and enable submit button

Question

I have some input fields, which I want to validate directly as the user is typing

The input fields are bind to certain conditions though.

Here is the example:

<input type="text" data-type="inputFullName" />
<br />
<input type="text" data-type="inputEmail" />
<br />
<input type="text" data-type="inputPhone" />
<br / >
<input type="checkbox" id="chkbox" />
<label>Check here</label>
<br />
<button id="button1" disabled>Click</button>

And the JS:

$('input').on('keyup change', function () {
   $('#button1').prop('disabled', $('input[data-type="inputFullName"]').val() == '' || $('input[data-type="inputEmail"]').val() == '' || $('input[data-type="inputPhone"]').val() == '' || !$('input[type="checkbox"]').is(':checked'))
});

So far so good, but how can I check for:

1) user has entered full name (first+lastname)

2) email is actually an email

3) phonenumber is 8 numbers long

I have made an JSFiddle

Any help is appreciated.

Your 3 questions have tons of duplicates in stackoverflow. **Use the search engine** and don't repeat that simple tasks for zillions. — Marcos Pérez Gude, Mar 07 '16 at 12:41
@RayonDabre the pattern should be basic, like `My Name`, but also `my name` or `my another name` — ST80, Mar 07 '16 at 12:43
Have you tried [searching](https://google.com/?q=jQuery+form+validation)? — mmgross, Mar 07 '16 at 12:45
Use another field/texbox for last name and put as mandatory. It is easy for you. — Hkachhia, Mar 07 '16 at 12:45
It is just using many things togetherout here..Try [this](https://jsfiddle.net/rayon_1990/7uey1yoh/1/) — Rayon, Mar 07 '16 at 12:52

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

Email validation can be done by this: Validate email address in JavaScript?

phonenumber:

<input type="text" id="inputPhonenumber" >

js:

var phonenumber = document.getElementById("inputPhonenumber").value;
if(phonenumber.length == 8)
    return true;
else
    return false;

These questions have been answered before. And they are not that hard to find here.

edited May 23 '17 at 12:07

Community

1
1

answered Mar 07 '16 at 12:47

Wouter den Ouden

1,523
2
17
44

how to validate input fields on change and enable submit button

1 Answers1