How to check if text fields are empty on form submit using jQuery

Question

How could I use jQuery to check if text-fields are empty when submitting without loading login php    lt form action  login php  method  post  gt       lt label gt Login Name  lt  label gt       lt input type  text  name  email  id  log    gt       lt label gt Password  lt  label gt       lt input type  password  name  password  id  pwd    gt       lt input type  submit  name  submit  value  Login    gt   lt  form gt    Thanks

User · Accepted Answer

You can bind an event handler to the  submit  JavaScript event using jQuery  submit method and then get trimmed  log text field value and check if empty of not like      form   submit function              Get the Login Name value and trim it     var name     trim     log   val             Check if empty of not     if  name                    alert  Text-field is empty             return false              FIDDLE DEMO

User · Answer

A simple solution would be something like this      form    on   submit   function          var has empty   false        this  find   input type   hidden      each function             if       this  val       has empty   true  return false               if   has empty     return false          Note  The jQuery on   method is only available in jQuery version 1 7   but it is now the preferred method of attaching event handlers   This code loops through all of the inputs in the form and prevents form submission by returning false if any of them have no value  Note that it doesn t display any kind of message to the user about why the form failed to submit  I would strongly recommend adding one    Or  you could look at the jQuery validate plugin  It does this and a lot more   NB  This type of technique should always be used in conjunction with server side validation

User · Answer

you should try with jquery validate plugin       form   validate      rules          email             required true            email true                   messages          email             required  Email is required             email  Please type a valid email

User · Answer

I really hate forms which don t tell me what input s  is are missing  So I improve the Dominic s answer - thanks for this   In the css file set the  borderR  class to border has red color        lt form id gt    submit function          var allIsOk   true          Check if empty of not       this  find   input type   hidden      each function              if       this  val                      this  addClass  borderR   focus                allIsOk   false                         return allIsOk

User · Answer

You can use  required  http   jsbin com atefuq 1 edit   lt form action  login php  method  post  gt       lt label gt Login Name  lt  label gt       lt input required type  text  name  email  id  log    gt       lt label gt Password  lt  label gt       lt input required type  password  name  password  id  pwd    gt       lt input  required type  submit  name  submit  value  Login    gt   lt  form gt

User · Answer

function isEmpty val    if val length   0    val length   null       return  emptyForm    else      return  not emptyForm            document  ready function   enter code here         form    submit function  event                input   each function               var getInputVal     this  val                if isEmpty getInputVal     emptyForm                    alert isEmpty getInputVal                 else                  alert isEmpty getInputVal                                      event preventDefault

User · Answer

you need to add a handler to the form submit event  In the handler you need to check for each text field  select element and password fields if there values are non empty       form   submit function          var res   true          here I am checking for textFields  password fields  and any          drop down you may have in the form         input type  text   select input type  password    this  each function              if   this  val   trim                         res   false                           return res     returning false will prevent the form from submitting

User · Answer

var save val      form   serializeArray      save val  each function  index  element         alert element name       alert element val

[jquery] How to check if text fields are empty on form submit using jQuery?

Examples related to jquery

Examples related to form-submit