modal window in validation form

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

score 0 · Answer 1 · answered May 16 '18 at 20:34

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.

modal window in validation form

1 Answers1