Dynamic validation using jquery

[jemz]

Hi can I ask some help how you validate form required using jquery without using framework validation

and without repeating code I mean more dynamic .

I have this code when submitting the form but I don’t like the way I coded it. I just Imagine what if I have long form, then my code will also gets long.

 var category =    $("[name='category']").val();
 var type =     $("[name='type']").val();

   if(category == ''){

       //show inline message error
   }

   if(type== ''){

       //show inline message error
   }

<form class="form-horizontal" id="myform">
  <div class="form-group">
    <label for="type" class="col-sm-2 control-label">Type</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="type" >
    </div>
  </div>
  <div class="form-group">
    <label for="" class="col-sm-2 control-label">Category</label>
    <div class="col-sm-10">
     <select name='category'>
      <option value=''>Select </option>
     <option value=''a">A</option>
      <option value=''b">B</option>
   </select>
    </div>
  </div>
  <div class="form-group">
    <label for="" class="col-sm-2 control-label">Personnel</label>
    <div class="col-sm-10">
     <select name='personnel'>
      <option value=''>Select </option>
     <option value=''1234">Mathew Lee</option>
      <option value=''1224">Sheila Haynes</option>
      <option value=''1111">Anthony Moore</option>
   </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

[m3g4p0p]

@jemz

Hi can I ask some help how you validate form required using jquery without using framework validation

Hi @jemz, there are no required attributes on any input elements… but if you add some you might do something like this:

$('form').on('submit', function (event) {
  $('[required]', event.target).each(function (index, element) {
    // If the field has a value, do nothing
    if (element.value) {
      return
    }

    // Otherwise prevent the form submission
    event.preventDefault()
    // Show error message here
  })
})

You’d also have to add the novalidate attribute to the form to disable the native browser validation; have a look here for a good guide to custom form validation:

Client-side form validation - Learn web development | MDN

[jemz]

Hi thank you for the quick reply…so this is the other way to validate if the user will not input to the field then submit the form. By the way do we need to use required instead of checking empty field?..also is this possible to use the button on click then validate form?

[Paul_Wilkins]

@jemz

By the way do we need to use required instead of checking empty field?

Because the HTML5 required attribute is there, you don’t need to use JavaScript at all. The web browser does all of the validation for you.

@jemz

…also is this possible to use the button on click then validate form?

When you use HTML5 validation techniques, the web browser validates the form fields as you interact with them. You don’t have to wait until the submit occurs.

[Paul_Wilkins]

Here’s an example of the HTML using required, so that the form cannot be submitted until the required fields are entered.

A red star class is added to the CSS code:

.form-group.required .control-label::after {
  content: "*";
  color: red;
}

And we add a required class name to the form-group container:

  <div class="form-group required">
    <label ...>Type</label>
    ...
  </div>

That places a red star to the right of the label, giving people a visual indication that the field is required.

Then, we tell the form itself that the field is required, by adding a required attribute:

      <input type="text" class="form-control" id="type" required>

which doesn’t let the form be submitted until there is something in that field.

You can see an example of this using your HTML code at https://jsfiddle.net/pmw57/p21txbzk/1/

[m3g4p0p]

@jemz

By the way do we need to use required instead of checking empty field?

Not sure what you mean, in my above example I am checking if any field with a required attribute has an empty value “manually” (as opposed to using the native form validation, which should disable first then). You might also use some other attribute (say a required class) and query for that, but semantically and in terms of accessibility it would make sense to use the attribute intended for it.

@jemz

also is this possible to use the button on click then validate form?

Above we are simply listening to a form submit event, whatever causing it; you can as well listen to button click events, but then the form will not get validated if the user just presses enter, for example.