I have a normal form with some textboess that are required. So when these textboxes are not filled, the HTML5 shows that warning in each field.
What I wanted to do is to show a nice notification when everything is filled. And it is working correctly, but id does not check if the textboxes are filled..
document.querySelector('#submit1').onclick = function(e){
e.preventDefault();
swal("Thank you!", "Your request has been submitted.", "success");
};
I took it a step forward and it checks the inputs before submitting, but the popup does not show up now. It takes me to the same page.
document.querySelector('#submit1').onclick = function(e){
e.preventDefault();
if (if ($('#contact-form')[0].checkValidity()) {
swal("Thank you!", "Your request has been submitted.", "success");
}
return;
};
Is there any way to fix this?
Thank you
<form id="contact-form" action="" name="contactform" class="row" method="post" >
<input required type="text" name="first_name" id="name">
<input required type="password" name="first_name" id="name">
<input type="submit" id="submit1">
</form>
Whats the extra if in the function
if( if ($('#contact-form')[0].checkValidity()) {
It should be:
if ($('#contact-form').checkValidity()) {
swal("Thank you!", "Your request has been submitted.", "success");
}
There are some assumptions I am making here: 1. you have checkValidity() as some method attached to your form. 2. swal is some custom function
Also, you can use
$('#submit1').on('click', function(e) {
});
or
$('#submit1').click(function(e) {
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.