Question

这是我的代码片段。我需要使用提醒成功提交的表单模态窗口（插件）。我怎样才能在下面的代码中实现它？我试图在{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');
            }
        }
    }
}

Answer 1

我猜您只需要使用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>

否则，请显示完整的代码。

验证形式的模态窗口

1 个答案: