CODEWITHSUNDEEP
jqueryhtml
user1119423
user1119423

Reputation: 103

How to make html5 required validator work with input type=button?

As mentioned in html5 required validator not working with input type=button the html5 validation is not working if the form button type is button, not submit. Is there anyway to make the html5 validation work even in this case?

Upvotes: 1

Views: 5990

Answers (3)

Sampad
Sampad

Reputation: 1793

I have shown you a simple validation technique using html5. 

<!DOCTYPE html>
<html>
<body>

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname" required><br>
  Last name: <input type="text" name="lname" required><br>
  E-mail: <input type="email" name="email"autocomplete="off"  required ><br>
  <input type="submit">
</form>



</body>
</html>

Validation using Javascript

<html>
<head>
<title>Form</title>
<script type="text/javascript">
function validate()
{
    if(document.getElementById('fname').value=='')
        {
        alert('Please fill up the first name!! ');
        document.getElementById("fname").style.borderColor="red";
        document.getElementById("fname").style.backgroundColor="yellow";
        document.getElementById("fname").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('email').value=='')  
     {  
        alert('Please provide valid email address !!');
        document.getElementById("email").style.borderColor="red";
        document.getElementById("email").style.backgroundColor="yellow";
        document.getElementById("email").style.borderWidth=2;
       return false;  
     } 
    else if (document.getElementById('phone').value=='')
        {
        alert('Please provide phone no');
        document.getElementById("phone").style.borderColor="red";
        document.getElementById("phone").style.backgroundColor="yellow";
        document.getElementById("phone").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('day').value=='')
        {
        alert('Please provide date for D.O.B');
        document.getElementById("day").style.borderColor="red";
        document.getElementById("day").style.backgroundColor="yellow";
        document.getElementById("day").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('month').value=='')
        {
        alert('Please provide month for D.O.B');
        document.getElementById("month").style.borderColor="red";
        document.getElementById("month").style.backgroundColor="yellow";
        document.getElementById("month").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('year').value=='')
    {
        alert('Please provide year for D.O.B');
        document.getElementById("year").style.borderColor="red";
        document.getElementById("year").style.backgroundColor="yellow";
        document.getElementById("year").style.borderWidth=2;
        return false;
    }
    else if(document.getElementById("city").value=="-1")
    {
        alert('Please select a city');
        return false;
    }


    else
        {
        confirm('Do you want to save the form ??');
        }

}
</script>

</head>
<body bgcolor="#FFCCCC">
<h1><b><i><u>Registration Form</u></i></b></h1>

<form name="form1"  method="post">
<table align="centre" bgcolor="#00FF00">
<tr>
    <td>Full Name:</td>
    <td><input type="text" id ="fname" name="fname" size="30"required placeholder="This field is Mandatory"></td>

</tr>
<tr>
    <td>Email:</td>
    <td><input type="email" id="email" name="email" size="30"required placeholder="Enter a valid Email Address"></td>

</tr>
<tr>
    <td>Phone No.:</td>
    <td><input type="number" id="phone"  size="30" name="phone" required ></td>

</tr>
<tr>
    <td>Date of Birth:
    Day
    <td><input type="number" name="day" id='day' min="1" max="31" value="" required>
    Month
    <input type="number" name="month" min="1" id='month' max="12" value="" required>
    Year
    <input type="number" name="year" min="1950" id='year'max="2020" value="" required>

</tr>
<tr>
    <td>City:</td>
    <td>
        <select id="city">
            <option value="-1">-~Select One~-</option>
            <option>KOLKATA</option>
            <option>DELHI</option>
            <option>MUMBAI</option>
            <option>CHENNAI</option>
            <option>BANGALORE</option>
        </select>
    </td>


</tr>
<tr>
    <td><input type="submit" value="Login" onclick="return(validate());"></td>
</tr>
<hr>

</table>
</form>

</body>
</html>

Hope it will help you

Upvotes: 1

Shubham
Shubham

Reputation: 70

The HTML5 form validation process is limited to situations where the form is being submitted via a submit button. The Form submission algorithm explicitly says that validation is not performed when the form is submitted via the submit() method. Apparently, the idea is that if you submit a form via JavaScript, you are supposed to do validation.

However, you can request (static) form validation against the constraints defined by HTML5 attributes, using the checkValidity() method. If you would like to display the same error messages as the browser would do in HTML5 form validation, I’m afraid you would need to check all the constrained fields, since the validityMessage property is a property of fields (controls), not the form. In the case of a single constrained field, as in the case presented, this is trivial of course:

function   submitform() 
{
      var f = document.getElementsByTagName('form')[0];
      if(f.checkValidity()) 
      {
          f.submit();
      } 
      else 
      {
          alert(document.getElementById('example').validationMessage);
      }
}

Upvotes: 2

Tabernero
Tabernero

Reputation: 635

I don't know why you tagged it as "jQuery".

You can solve it with Javascript, by detecting if the input is empty when you click a button:

...
if (document.getElementById("InputID").value == "") {
    // It's empty
} else {
    // It's not empty
}
...

Upvotes: 0

Related Questions