0

这是我在进行基本的 jquery 联系表单验证时遇到的一个普遍问题，我似乎无法找到答案。

这是我的意思的一个例子：

（表单动作在此页面开发中设置，稍后更改为消息服务 url）

    <form name="contact_form" action="#">
       <input id="name_field" name="name" type="text" required>
       <input id="email_field" name="email" type="email" inputmode="email" required pattern="^\b[\w\.-]+@{1}[\w\.-]+\.\w{2,6}\b">
       <textarea id="message_field" name="message" type="text" required>
       <input id="submit" type="submit" value="SUBMIT">
    </form>

下面是我一直在使用的 Jquery 的概括。

 $(function(){
    var emailF = $('#email_field');
    var emailStr = emailF.val();
    var nameF = $('#name_field');
    var nameStr = nameF.val();
    var msgF = $('#message_field');
    var msgStr = msgF.val();
    var regex = new RegExp(/^\b[\w\.-]+@{1}[\w\.-]+\.\w{2,6}\b/i);

    function blankCheck(){
    
    // BELOW line is where the issue happens
       if (nameStr != "" && emailStr != "" && msgStr != ""){
          alert ('blankCheck PASS!!!');
          return true;
       } else {
          alert ('blankCheck FAIL!!!');
          return false;
       };
    });


    $('#submit').on('submit',function(e){
       function validateAll(){
          if ( blankCheck() && regex.test(emailStr) ){
             alert('validateAll PASS!!!');
             $('#submit').val("SENDING...");
      // This is followed by many setTimeout functions that animate elements on current page
          } else {
             $('#submit').css({'background-color':'red'});
             alert('validateAll FAIL!!!');
      // Wanted to include some UX negative feedback animation on button, but browser validation (from HTML) prevents it from executing (other than ui:error type pseudoclasses)
          };
       });

       validateAll();

       $.when(validateAll).done(function(){
           e.preventDefault();
           var href = $('#contact_form').attr("action");
           $.ajax({
               type: "POST",
               dataType: "json",
               url: href,
               data: $('#contact_form').serialize(),
           });
       });
    });
 });

这会导致第一次/初始加载/访问联系页面时出现问题，并将 blankCheck 函数返回为 false。如果正确填写了所有输入，则在页面刷新时，值将保留，并且 blankCheck 测试通过与刷新前失败的相同输入。

...但是！...如果我将 blankCheck 函数更改为：

    function blankCheck(){
       if (emailF.val()!="" && nameF.val()!="" && msgF.val()!="") {
          alert('blankCheck PASS!!!');
          return true;
       } else {
          alert('BLANK FAIL!!!');
          return false;
       };
    });

...它似乎按预期工作。无需刷新页面即可让空白检查通过。

所以这让我想知道：将方法存储在将在“if”条件下使用的变量中是不好的做法吗？

这种性质的 Jquery/JS“if”条件中是否需要一种方法，或者是否可以在“if”条件中使用带有存储方法的变量（如第一个示例if (nameStr != "" && emailStr != "" && msgStr != "")）？

我的直觉告诉我，在上面的 jquery 中我的作用域（变量、函数调用等）存在问题，但我仍然是初学者，所以请谨慎对待。

有人对为什么会发生这种情况有很好的解释吗？

4

1 回答 1

1

如果值在测试之前发生更改，则不能在使用它之前存储它。

像在示例 2 中所做的那样将这些移动到测试内部。这就是如何做到的

var emailStr = emailF.val();
var nameStr = nameF.val();
var msgStr = msgF.val();

哦，永远不要在表单中调用任何提交如果您想使用脚本提交表单，那么 form.submit 将被该名称或 ID 覆盖

您需要立即重命名按钮并使用 FORM ID 来附加提交事件：

  $('#contact_form').on('submit',function(e){

使用

<form id="contact_form">
...
 <input type="submit" value="SUBMIT">
</form>
于 2021-02-06T20:18:59.320 回答