JQuery Form Validations

Manideepgoud
Posted by Manideepgoud under jQuery category on | Points: 40 | Views : 247
Hi,
In the below code am showing how to validate forms in jquery and check the data has filled or not.
If the form is filled and click submit button it displays form success and if the form is not filled it displays form is unsuccess .
<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$(document).ready(function(){
$("#iihtcontactid").submit(function() {
var forms = document.getElementById('iihtcontactid');
if(forms.checkValidity()){
alert("Form_Success")
}
else{
alert("Form_Unsuccess")
}
});
});
</script>
</head>

<body>

<div class="container-fluid">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-section">

<form class="needs-validation" id="iihtcontactid" novalidate>
<div class="form-group">
<label for="email" class="control-label col-xl-2 col-lg-2 col-md-2 col-sm-2 col-xs-12 contactuslabel">Name:</label>&nbsp;
<input type="text" class="form-control col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 contactuslabelinput" id="email" name="myname" required/>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-xl-2 col-lg-2 col-md-2 col-sm-2 col-xs-12 contactuslabel">Email:</label>&nbsp;
<input type="email" class="form-control col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 contactuslabelinput" id="pwd" name="email" required/>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-xl-2 col-lg-2 col-md-2 col-sm-2 col-xs-12 contactuslabel">Query:</label>&nbsp;
<textarea class="form-control col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 contactuslabelinput" id="pwd" rows="7" required></textarea>
</div>
<div class="contactuspagebuttons">
<button class="btn btn-primary contactuspagesubmit" type="submit">Submit</button>
<button class="btn btn-primary contactuspageclear" type="submit">Clear</button>
</div>
</form>
</div>
</div>
</div>
</div>

</body>

</html>

Comments or Responses

Login to post response