Required field validators in jquery

Question

I want to give validation in my form fields..

Fields:

Name (textbox) --> Should enter the value. When without enter & come out it will show error message.
Email(regex) -->checking the mail format
Gender(radio button) -->any one radio button should selected
Location(dropdown) --> without enter dropdown will show error message
Mobile Number(textbox) --> enter only numbers

The above all types of validation I need.

$('#Email').click(function(){
            var name=$('#Name').val();
            if(name==""){
                $('#Name').after('<div class="red">Name is Required</div>');

            }
            });

But whenever i click email box it shows error message.How to do it? Please Help me? I tried 1 st field Name

hey you are doing the click fucntino for email, but has the check for #Name, Is this you required. if so, This may be happening 1. Name field is empty, 2. Now when you click on #Email field, then #Name field is validating. Why can't you use jquery.validator.js plugin, it will suit your needs. — RONE, Jul 19 '13 at 06:50
Search for blur(),selectedIndexChanded() events and email regex `/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/` and search how to use it. — imVJ, Jul 19 '13 at 06:51

Abijeet Patro · Accepted Answer · 2019-03-10T07:40:04.083

You aren't supposed to do it on the click event of the email textbox, but on the blur event of the name textbox. The blur event is fired whenever a control loses focus. Try this,

$("#Name").blur(function(){
    if($(this).val().length === 0){
        $(this).after('<div class="red">Name is Required</div>');
    }
});

Here I am checking the length of the value inside the #Name textbox, whenever it loses focus. Now when you are submitting your form, you'll have to make this check again when the user presses the button click event.

Similarly to validate the email field, you'll use the regex that @onlyVJ gave.

/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

You'll get the value from the textbox and match it with the regex, using match. Follow this link to learn more. This will be done on the blur event of the #Email textbox

EDITED -

I won't be giving you code but, I'll be instructing you on an approach that you can use.

For dropdown -

You can attach a blur event to dropdown, and check the whether the default value that you show in the beginning when the page loads is still the selected value. If so, show the error, else don't.

For radio buttons -

Check this jsFiddle. Grabbed from here. You should be able to use that to configure your code to display error when radio button is not checked.

Didn't work so I used `$(this).val()` instead of `this.val()` — Fanky, Mar 04 '19 at 12:48

score 1 · Answer 2 · answered Jul 19 '13 at 06:55

1

You need to use the blur event to identify that an element has lost focus. Visit the documentation for blur for more information and an example.

If you want you could also try the jQuery validation plugin. Visit the jQuery Validation Plugin website

answered Jul 19 '13 at 06:55

Prahalad Deshpande

4,709
1
20
22

score 0 · Answer 3 · answered Jul 19 '13 at 06:57

0

something like this...

$("#element").blur(function(){
   $(this).validate({
      // your code here
   })
})

answered Jul 19 '13 at 06:57

Ganesh Rengarajan

2,006
13
26

Required field validators in jquery

3 Answers3