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

您好，我已经在Shopify上写了一个网站，我想禁用我的按钮，并在我的输入中添加一些自定义CSS类，如果输入没有填写在我的4steps表单中。 我已经用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>

$（文档）.ready（函数（）{
$（“#提交按钮，#btn0，#btn1，#btn2”）。单击（函数（）{
ValidateForm（）；
});
函数ValidateForm（）{
var invalidForm=false；
var指数=0；
var按钮=document.querySelector（“#submitButton，#btn0，#btn1，#btn2”）；
$（“#表单(表单--步骤表单-”+索引+“输入.表单(表单--输入”）。每个（函数（）{
if（$（this.val（）<1）{
无效形式=真；
}
});
if（invalidForm==真）{
button.disabled=true；
$（.input.form\uuu form--input”）.removeClass（.form\uu form--validation”）.addClass（.form\uu form--validationValidate）；
}else if（invalidForm==false）{
button.disabled=false；
$（.input.form\uuu form--input”）.removeClass（.form\uu form--validation”）.addClass（.form\uu form--validationValid）；
索引++；
}
}
});

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

$(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>

维列兹·塞西尔·沃特·诺姆。

按钮如下：

$(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>

{%include'图标箭头滑块“%”
苏万特

---

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

> p>您的值检查总是错误的，考虑使用长度函数代替：

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

然后，在函数的末尾，当您完成所有需要的验证后，您可以发送它，如下所示：

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

---

通过对我的代码进行一次大的重构，我已经消除了所有的错误。我将与您分享我的代码

$(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");
        }
    });
});

$（文档）.ready（函数（）{
$（“[到步骤]”）。在（'单击'，函数（）{
var to_step=$（this.attr（“to step”）；
var current_step=$（this）.closest（'[stepform]'）.attr（“stepform”）；
var form_error=false；
如果（！（$（此）.hasClass（“上一个btn”））{
$（'[stepform=“'+current\u step+']”。form\u form--input'）。每个（函数（）{
if（$（this）.val（）.length==0）{
$（this.addClass（“输入--错误”）；
form_error=true；
}否则{
$（this.removeClass（“input--error”）；
}
});
}
如果（！form_错误）{
if（当前步骤<4 | |$（此）.hasClass（“上一个btn”））{
$（'[stepform'）.hide（）；
$（“[stepform=“”+to_step+“]”）。fadeIn（）；
}
}
});
$（“#提交按钮”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
if（$（“#表单uu表单--radioRgpd:checked”）.length==1）{
$（“#联系表格”）。提交（）；
}否则{
$（“.form_uuform--radioRgpdLabel”）.addClass（“label--error”）；
}
});
});

---

这段代码将检查我在4个“pages”表单中的步骤，并在表单是否填写错误时添加正确的css类。

您的div周围是否有表单标记？您能告诉我们吗？对于我检查的第一个片段，只有一个

@vincent dI agree。对于第二个片段，我必须检查<代码>'点击'事件bc我只有表单的最后一个按钮，该按钮的类型为

类型：提交

原因与Shopify a

类型：提交

将整个表单发送到服务器，因此所有按钮都与

类型：按钮

！不清楚，它是否回答了您的问题？：）如果是，请不要忘记将该答案标记为“好答案”单击“向上和向下投票”按钮下方的复选框，我已将我尝试进行的更新放在这里，但它仍然无法运行@vincent-d