How to know required field validation triggered or not?

Question

I have a big form with lot of fields and most of them are required fields. so i wanted to show pop-up alert message saying please fill required field.

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

also i m showing usual message below that particular field, i need something like on submit click

 If (some fields required field error got triggered )
      {
       show alert pop-up message ;
      }

I am new to this thing so..

This mozilla article might point you in the right direction https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation — , Jun 29 '19 at 05:44

score 0 · Answer 1 · answered Jun 29 '19 at 05:43

function checkEmpty()
{
    var fname = document.getElementById('fname').value;

    if(!fname)
    {
        alert('Field is empty')
    }
}

<form onsubmit='checkEmpty'>
<!--Form contents-->
</form>

Validation with javscript can easily be bypassed since it happens in the client side.

Samir Patel · Answer 2 · 2019-06-29T06:56:19.230

Try this

<form onsubmit="myFunction()">
<input name="fname" id="fname" type="text" class="form-control" required>
<form>

Use the following Function to check fields

function myFunction() {
var fname=document.getElementById('fname').value;
if(!fname)
{
    alert("please fill required field");
}
}

You can check multiple fields in if conditions by putting || Sign. eg you have 2 filed fname and lname. You can check by if(!fname || !name)

score 0 · Answer 3 · answered Jun 29 '19 at 11:25

You need to show overall alert as well as individual error message below each required field.

To do so using jQuery,

    <form>
    <input name="fname" id="fname" type="text" class="form-control validateclass" required>
    <span class="spnError"></span>
    <input name="lname" id="lname" type="text" class="form-control validateclass" required>
    <span class="spnError"></span>
    <input id="btnClick" type="button" value="Submit Form"/>
    </form>


    <script type="text/javascript">
        $(function () {
         $("#btnClick").click(function()
         {
          $(".validateclass").each(function() {
          var fieldValue =$(this).val();
          if(fieldValue == null || fieldValue == "")
          {             
            $(this).next().css( "color", "red" ).text("Field is required");    
          }
          else
          {
           $(this).next().text(""); 
          }
        });
     });                        
   });
  </script>

How to know required field validation triggered or not?

3 Answers3