модальное окно в форме проверки - PullRequest
Новая
       27

модальное окно в форме проверки

0 голосов
/ 16 мая 2018

Это фрагмент моего кода. Мне нужно предупредить успешно отправленную форму, используя модальное окно (плагин). как я могу понять это в моем коде ниже? Я пытался вставить функцию в конструкцию {if else}, но не знаю, правильно ли это. Пожалуйста помоги !!! Я нуб в интерфейсе, буду благодарен за вашу поддержку :) 

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

1 Ответ

0 голосов
/ 16 мая 2018

Полагаю, вам просто нужно использовать protectDefault 

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>

В противном случае, пожалуйста, покажите свой полный код.

...