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>
<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>
<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>
<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>