验证形式中的模态窗口

Question

It's a snippet of my code. I need to alert the successfully submitted form using modal window (plugin). how can I realise it in my code below ? I tried to paste function in { if else } construction but don't know if it's correct. Please, help !!! I'm a noob in frontend, will be grateful with your support :)

var btn = document.querySelector('.btn');
btn.addEventListener('click', checkForm);
function checkForm() {

    for(i = 0; i < inputs.length; i++) { 

        for(y = 0; y < errorsText.length; y++) {
            if (inputs[i].value == "") {
                inputs[i].style.borderColor = 'red';
                errorsText[i].innerHTML = 'This field can not be empty!';
                errorsText[i].classList.add('error-color');
            } else {
                inputs[i].style.borderColor = 'black';
                errorsText[i].style.display = 'none';
                // alert('The form is successfully submitted!');
                // return false;
            }

            if(!first_name.value.match(nameReg)) {
                error_email.innerHTML = 'Please, enter correct first name !';
                error_email.classList.add('error-color');
            } else {
                error_email.style.display = 'none';
            }
            if(select.value == 0)   {
                error_select.innerHTML = 'Please, select a country !';
                error_select.classList.add('error-color');
            } else {
                error_select.style.display = 'none';
            }

            if( birthDate.value <= today ) {
                error_birthDate.innerHTML = 'Please, pick a correct date';
            }
            if(!male_sex.checked && !female_sex.checked) {
                error_sex.innerHTML = 'Please, choose an appropriate sex!';
                error_sex.classList.add('error-color');
            } else {
                error_sex.style.display = 'none';
            }

            if(!email.value.match(email_exp)) {
                error_email.innerHTML = 'Please, enter correct email !';
                error_email.classList.add('error-color');
            }
        }
    }
}

Answer 1

I guess you just need to use preventDefault

 var btn = document.querySelector('.btn'); btn.addEventListener('click', checkForm); // Pass (event) function checkForm(event) { // Your code ... // Prevent the default button click action event.preventDefault(); // Run your alert alert('it works!'); } 

 <!-- test code --> <form id="register" action="#" method="POST"> <div class="input-group"> <input class="form-control" placeholder="value" name="value" type="text"> <span class="input-group-append"> <button type="submit" class="btn btn-light">submit</button> </span> </div> </form> 

Otherwise, please show your full code.