CODEWITHSUNDEEP
javascriptjqueryforms
Brigo
Brigo

Reputation: 1112

Check if an input with class is empty in a form

I wrote a code to validate a form on client-side. Since I binded all the error messages on('input', function()) now the last case to take in consideration is when the user didn't even hit a required input leaving it empty.

If all the inputs in the form were required I could have used something like

$('#subButton').on('click', function(e) {
    if (!$('#formName').val()) {
        e.preventDefault();
        alert("Fill all the required fields");
});

But since in my form there are required inputs (with class="req") and non required inputs, I would like to know if there's a method to perform the check only on the .req inputs. Something like:

$('#subButton').on('click', function(e) {
    if (!$('#formName.req').val()) {
        e.preventDefault();
        alert("Fill all the required fields");
    }
});

In other words I would like to perform the identical check which the up-to-date browsers do if the HTML required option is specified, just to be sure that, if the browser is a bit old and doesn't "read" the required option, jQuery prevents the form to be sent.

Upvotes: 1

Views: 1658

Answers (3)

Lyubomir
Lyubomir

Reputation: 20027

Use reduce

const submitAllowed = $('.req').toArray().reduce((result, item) => { 
   return result && (!!item.value || item.value === 0);
}, true)

if (!submitAllowed) { ... }

Here is a simple demo:

<form action="dummy.asp" onSubmit="return handleSubmit()">
    <p> You can only submit if you enter a name </p>
    <br />
    Enter name: <input class="req" type="text" name="fname">
    <input type="submit" value="Submit">
</form>

<script>
  function handleSubmit() {
    const submitAllowed = $('.req').toArray().reduce((result, item) => { 
         return result && (!!item.value || item.value === 0);
      }, true)

    return submitAllowed;
  }
</script>

Upvotes: 1

Rounin
Rounin

Reputation: 29453

But since in my form there are required inputs (with class="req") and non required inputs, I would like to know if there's a method to perform the check only on the .req inputs

There is an HTML5 form boolean attribute required.

required works on:

  • <input type="text" />
  • <input type="search" />
  • <input type="url" />
  • <input type="tel" />
  • <input type="email" />
  • <input type="password" />
  • <input type="date" />
  • <input type="number" />
  • <input type="checkbox" />
  • <input type="radio" />
  • <input type="file" />

Example:

input {
display: block;
margin: 6px;
}
<form action="http://www.stackoverflow.com/">
<input type="text" placeholder="This is required" required />
<input type="text" placeholder="This isn't required" />
<input type="text" placeholder="This is required" required />
<input type="text" placeholder="This isn't required" />
<input type="submit" value="Press Me Without Filling in any of the Fields">
</form>

Peculiarly, the StackOverflow Snippet above doesn't seem to be working.

Here's a JSFiddle to demonstrate what it should be doing:

https://jsfiddle.net/a5tvaab8/

Upvotes: 0

tymeJV
tymeJV

Reputation: 104775

Just use .filter and check the length. Also, a simple ! check probably isn't good, what if someone enters 0?

var hasEmptyFields = $('#formName.req').filter(function() {
    return this.value.replace(/^\s+/g, '').length; //returns true if empty
    //Stole the above regex from: http://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field
}).length > 0

if (hasEmptyFields) {

}

Upvotes: 1

Related Questions