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

【问题标题】：How made my function affect the DOM Jquery?我的函数是如何影响 DOM Jquery 的？
【发布时间】：2020-10-07 10:00:09
【问题描述】：

嗨，我在 Shopify 上编写了一个网站，如果我的输入未填写，我想禁用我的按钮并在我的输入中添加一些自定义 CSS 类4步形式。我用我记得的 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 工作。我想了解为什么以及如何使它适用于本网站，以下感谢您的时间和帮助，照顾好自己！

【问题讨论】：

你的 div 周围有表单标签吗？你能告诉我们吗？
只有一个<form id="form__form--contactWrapper" class="form__form--contactWrapper">@vincent-d

标签： javascript html jquery css shopify

【解决方案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();

【讨论】：

我同意第一个 sn-p 我正在检查该值是否为假。第二个我必须检查'click'事件，因为我只有表单的最后一个按钮type: submit，因为Shopify是type: submit将整个表单发送到服务器，所以所有按钮都带有@ 987654328@!
不清楚，它回答了你的问题吗？ :) 如果是，请不要忘记通过单击向上和向下投票按钮下方的复选标记将该答案标记为“好答案”
我已经发布了我尝试做的更新，但它仍然无法正常工作@vincent-d

【解决方案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 类。

【讨论】：