我的函数是如何影响DOM Jquery的

Question

Hi，我在Shopify上写了一个网站，如果我的4步表单上没有填写输入，我想禁用我的按钮并在输入中添加一些自定义CSS类。我用Jquery中的记忆写了一段代码，我已经很久没有使用这种语言了。

这是jQuery函数：

$(document).ready(function () {

$("#submitButton, #btn0, #btn1, #btn2").click(function () {
ValidateForm();
});

function ValidateForm() {
var invalidForm = false;
var index = 0;
var button = document.querySelector("#submitButton, #btn0, #btn1, #btn2");
$("#form__form--stepForm-" + index + "input.form__form--input").each(function () {
if ($(this).val() < 1) {
invalidForm = true;
}
});
if (invalidForm === true) {
button.disabled = true;
$("input.form__form--input").removeClass(".form__form--validation").addClass(".form__form--validationInvalid");
} else if (invalidForm === false) {
button.disabled = false;
$("input.form__form--input").removeClass(".form__form--validation").addClass(".form__form--validationValid");
index++;
}
}
});

我的所有输入都是这样的：

<div class="3/3 3/3--thumb 3/3--pocket grid__cell--center">
<input type="text" id="form__form--lastnameInput" name="contact[lastname]"
class="form__form--input form__form--validation" placeholder="Nom *" value required>
<div class="form__form--invalidFeedback">Veuillez saisir votre nom.</div>
</div>

按钮如下：

<button id="btn0" type="button" class="button button--primary form__form--button"
aria-label="SUIVANT" title="SUIVANT">
{% include 'icon-arrow-slider' %}
SUIVANT
</button>

正如您所看到的，这是jquery的一个非常基本的函数，也是一个经典的HTML输入，但它不会阻塞按钮，也不会使CSS工作。我想了解为什么以及如何让它为这个网站工作，并感谢您的时间和帮助，照顾好自己！

Answer 1

您的值检查总是错误的，请考虑使用长度函数：

if ($(this).val().length < 1) {
invalidForm = true;
}

您可能还需要防止表单的默认行为。与其听点击，不如听提交事件：

$("#form__form--contactWrapper").on('submit',function (e) {
e.preventDefault(); //the form is not sent yet
ValidateForm();
});

然后在函数ValidateForm结束时，当您完成了所有需要的验证时，您可以发送它，如下所示：

$("#form__form--contactWrapper").submit();

Answer 2

我已经通过对我的代码进行大量引用来消除所有错误，我与您分享我的代码

$(document).ready(function () {
$('[to-step]').on('click', function () {
var to_step = $(this).attr("to-step");
var current_step = $(this).closest('[stepform]').attr("stepform");
var form_error = false;
if (!($(this).hasClass("previous-btn"))) {
$('[stepform="' + current_step + '"] .form__form--input').each(function () {
if ($(this).val().length == 0) {
$(this).addClass("input--error");
form_error = true;
} else {
$(this).removeClass("input--error");
}
});
}
if (!form_error) {
if (current_step < 4 || $(this).hasClass("previous-btn")) {
$('[stepform').hide();
$('[stepform="' + to_step + '"]').fadeIn();
}
}
});
$("#submitButton").on("click", function (event) {
event.preventDefault();
if ($("#form__form--radioRgpd:checked").length == 1) {
$("#contact_form").submit();
} else {
$(".form__form--radioRgpdLabel").addClass("label--error");
}
});
});

这段代码将检查我在4页表单中的步骤，如果表单填充不好或没有填充，则添加正确的css类。