jQuery validation not working for input fields

Question

I have jQuery validation for my input fields. But seems like not working :(

$('form')
.submit(function() {

    var name = $.trim($('#TxtName').val());
    var dob = $.trim($('#TxtDesig').val());
    var salary = $.trim($('#TxtSalary').val());

    if (name === "" || dob === "" || salary ==="") {
        alert("All fields are mandatory");
    }
    return false;
});

Here is my html form:

<form class="form-group" method="post">
        <label class="control-label">Employee Name:</label> 
            <input class="form-control" type="text" id="TxtName" name="EmployeeName" value="" /><br />
        <label class="control-label">Designation:</label> 
            <input class="form-control" type="text" id="TxtDesig" name="Designation" value="" /><br />
       <label class="control-label">Salary:</label>
            <input class="form-control" type="date" id="TxtSalary" name="Salary" value=""/><br/>

"Not working" is not a useful statement. What happens? Console errors? — mplungjan
– mplungjan, Commented Nov 7, 2016 at 14:01
You likely want to change $('form').submit(function() { to $('form').submit(function(e) { and add e.preventDefault() when in error — mplungjan
– mplungjan, Commented Nov 7, 2016 at 14:01
@mplungjan I mean no validation messages are appearing even the fields are empty — izengod
– izengod, Commented Nov 7, 2016 at 14:05

mplungjan · Accepted Answer · 2016-11-07 14:15:48Z

1

Here is how to code your jQuery validation.

I need to show it in a fiddle since the stacksnippet does not allow form submit

https://jsfiddle.net/mplungjan/n6mcyf6x/

$(function() {
  $('form').on("submit", function(e) {
    var name = $.trim($('#TxtName').val());
    var dob = $.trim($('#TxtDesig').val());
    var salary = $.trim($('#TxtSalary').val());
    if (name === "" || dob === "" || salary === "") {
      alert("All fields are mandatory");
      e.preventDefault();
    }
  });
});

As mentioned by Rhys Bradbury an alternative is to add "required" to each field .
It may however not be supported by older browsers (like IE<10) for example)

http://caniuse.com/#feat=form-validation

edited Nov 7, 2016 at 14:15

answered Nov 7, 2016 at 14:09

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

izengod Over a year ago

Unfortunately, this is not working too. I will give a try using "required" attribute but not sure whether I am allowed to do that because I have very little idea about what browsers our client end users are using.

mplungjan Over a year ago

Yes this is working. Click the jsfiddle to see it work.

izengod Over a year ago

oops, don't know why not working in my page :( I'm using the following imports, are they fine? <script src="~/Scripts/jquery-3.1.1.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/Employee/CreateNewEmployeeFormValidation.js"></script>

mplungjan Over a year ago

Without seeing your page I do not know either. Did you load jQuery? Any console messages?

izengod Over a year ago

no error message, I think some issue with the imports. jquery.min.js, jquery.validate.min.js and my custom js file, I'm importing these 3 js files to my page. Is that ok?

|

Rhys Bradbury · Accepted Answer · 2016-11-07 14:04:41Z

1

Why do this in jQuery? Why not use HTML required attribute on form inputs?

ref: http://www.w3schools.com/jsref/prop_text_required.asp

example:

<input placeholder="required a value here please" required/>

FYI this is HTML5

answered Nov 7, 2016 at 14:04

Rhys Bradbury

1,71714 silver badges25 bronze badges

1 Comment

user6820627 Over a year ago

Yeah. Why JQuery? HTML required is easier.

Minhajul Islam · Accepted Answer · 2017-05-11 09:11:55Z

You can validate by two process.

process 1: Add following attribute into validated controls as one I edited from your source. Easiest way rest will be responsible of jQuery validation engine.

 <input class="form-control" type="text" id="TxtName" name="EmployeeName" value="" required='' data-msg-required='Please provide name.'/>

Process 2: If you want your controlled validation then you need write piece of code as follows.

$("#form").validate({
    rules:{   //Validation rules work on name attribute
         EmployeeName:{  //Condition Area
               required:true
         }
    },
   messages:{   //user information area
       EmployeeName:
       {
           required:"Please provide Employee Name"  /// Message to user for required fields
       }
   }

});

You get more information from jQuery Website

Collectives™ on Stack Overflow

jQuery validation not working for input fields

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related