How to check if all inputs are not empty with jQuery

Question

I need to validate a form with jQuery  I can check all my inputs one by one  but it s not a very practical solution   How can i check if all my inputs are non-empty more efficiently  In my form i can have input elements of different types  text  several groups of radio  select etc

User · Answer

var isValid   true      tabledata   find   tablebody   find  input   each function     var element     this   if  element val            isValid   false    else  isValid   true         console log isValid

User · Answer

form submit btn   click function           input   each function             if    this  val                 alert  Some fields are empty               return false

User · Answer

You can achive this with Regex and Replace or with just trimming   Regex example   if     input   val   replace    s                     alert  Input is not filled        With this replace   function you replace white spaces with nothing  removing white spaces    Trimming Example   if     input   val   trim                alert  Input is not filled        trim   function removes the leading and trailing white space and line terminator characters from a string

User · Answer

Use each   var isValid     input   each function        var element     this      if  element val                   isValid   false             However you probably will be better off using something like jQuery validate which IMO is cleaner

User · Answer

input   each function         if    this  val                    console log  all inputs filled              else          console log  theres an empty input            return false             you might want to wrap this in a keyup function

User · Answer

You can do it here is code   lt  DOCTYPE html gt   lt html lang  en  gt    lt head gt    lt meta charset  UTF-8  gt    lt title gt  lt  title gt    lt script type  text javascript  src  http   code jquery com jquery min js  gt  lt  script gt   lt style gt  select textarea input type  text   input type  password   input type  datetime   input type  datetime-local   input type  date   input type  month   input type  time   input type  week   input type  number   input type  email   input type  url   input type  search   input type  tel   input type  color    uneditable-input display inline-block height 20px padding 4px margin-bottom 9px font-size 13px line-height 18px color  555555   textarea height auto   select textarea input type  text   input type  password   input type  datetime   input type  datetime-local   input type  date   input type  month   input type  time   input type  week   input type  number   input type  email   input type  url   input type  search   input type  tel   input type  color    uneditable-input background-color  ffffff border 1px solid  cccccc -webkit-border-radius 3px -moz-border-radius 3px border-radius 3px -webkit-box-shadow inset 0 1px 1px rgba 0  0  0  0 075  -moz-box-shadow inset 0 1px 1px rgba 0  0  0  0 075  box-shadow inset 0 1px 1px rgba 0  0  0  0 075  -webkit-transition border linear 0 2s box-shadow linear 0 2s -moz-transition border linear 0 2s box-shadow linear 0 2s -ms-transition border linear 0 2s box-shadow linear 0 2s -o-transition border linear 0 2s box-shadow linear 0 2s transition border linear 0 2s box-shadow linear 0 2s  textarea focus input type  text   focus input type  password   focus input type  datetime   focus input type  datetime-local   focus input type  date   focus input type  month   focus input type  time   focus input type  week   focus input type  number   focus input type  email   focus input type  url   focus input type  search   focus input type  tel   focus input type  color   focus  uneditable-input focus border-color rgba 82  168  236  0 8  outline 0 outline thin dotted  9 -webkit-box-shadow inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 82 168 236  6  -moz-box-shadow inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 82 168 236  6  box-shadow inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 82 168 236  6  height  20px   select input type  radio   input type  checkbox   margin 3px 0  margin-top 0 line-height normal cursor pointer   select input type  submit   input type  reset   input type  button   input type  radio   input type  checkbox   width auto    uneditable-textarea width auto height auto    country height  30px    highlight       border  1px solid red  important     lt  style gt   lt script gt  function test     var isFormValid   true       bs-example input   each function        if    trim   this  val    length    0             this  addClass  highlight            isFormValid   false            this  focus              else            this  removeClass  highlight               if   isFormValid         alert  Please fill in all the required fields  indicated by            return isFormValid         lt  script gt   lt  head gt    lt body gt    lt div class  bs-example  gt   lt form onsubmit  return test    gt       lt div class  form-group  gt           lt label for  inputEmail  gt Email lt  label gt           lt input type  text  class  form-control  id  inputEmail  placeholder  Email  gt       lt  div gt       lt div class  form-group  gt           lt label for  inputPassword  gt Password lt  label gt           lt input type  password  class  form-control  id  inputPassword  placeholder  Password  gt       lt  div gt       lt button type  submit  class  btn btn-primary  gt Login lt  button gt      lt  form gt     lt  div gt    lt  body gt    lt  html gt

User · Answer

Like this   if     input value       length  gt  0       console log  some fields are empty

User · Answer

I just wanted to point out my answer since I know for loop is faster then   each loop here it is   just add class  required  to inputs you want to be required and then in jquery do       signup form   submit function        var fields      input required        for var i 0 i lt fields length i             if   fields i   val                         whatever

User · Answer

Just use      input empty   length    0    If it s zero  none are empty   To be a bit smarter though and also filter out items with just spaces in  you could do      input   filter function          return   trim   this  val    length    0    length    0

[jquery] How to check if all inputs are not empty with jQuery

Examples related to jquery

Examples related to input