当表单与jQuery插件混淆时，如何检查表单的有效性？

Question

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>

Answer 1

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) {
});