检查表单输入是不是为空，如果不是，则在按下提交按钮时显示隐藏的 div

Posted 2023-05-09

【中文标题】检查表单输入是不是为空，如果不是，则在按下提交按钮时显示隐藏的 div

【英文标题】：Check if form inputs are empty and if not, display a hidden div on submit button press检查表单输入是否为空，如果不是，则在按下提交按钮时显示隐藏的 div

【发布时间】：2021-04-18 09:44:50

【问题描述】：

我有一个表单，它有两个输入，一个用于文本，一个用于复选框。我要做的是检查这些输入字段是否为空。如果文本输入为空且未选中复选框，则会显示错误消息。否则，如果没有空输入字段，则提交按钮将隐藏父 div 并显示另一个显示消息的 div。

<div class="newsletter-register">
    <form action="#" id="" class="newsletter-register-form">
        <div class="checkbox">
            <input type="checkbox" class="newsletter" name="newsletter" value="">
            <label for="newsletter" class="newsletter-check-label">I have agreed</label>
        </div>
        <div class="form-group" id="email"> 
            <label for="email" class="form-email-label"></label>
            <input type="text" id="email" class="form-control form-email" placeholder="your e-mail address">
        </div>
        <input type="submit" name='submitform' class="newsletter-join" value="Subscribe">
    </form>
</div>
<div class="newsletter-joined" style="display: none;">     
       <h4>Well done</h4>
 </div>
<div class="error-message" style="display: none;">
    <p>You forgot something.</p>
</div>

jQuery:

$(document).ready(function() 
    $(".newsletter-register-form").submit(function() 
        e.preventDefault();
        $('.newsletter-joined').css("display","block");
        $('.newsletter-register').css("display","none");
        if($(".form-email").val().length == 0)
            $(".error-message").show();
        result=false;
        
        if($('.newsletter-check2').prop('checked', false))
           $(".error-message").show();
        result=false;
           
        return result;
    );
);

我似乎无法正常工作。在当前状态下，提交按钮刷新页面。

【问题讨论】：

您想将结果返回到什么位置？您不能从事件回调中返回值。

【参考方案1】：

这很简单，这里有一个修复方法。

$(document).ready(function() 
  $(".newsletter-register-form").submit(function() 
    e.preventDefault();
    $('.newsletter-joined').hide();
    $('.newsletter-register').hide();
    $(".error-message").hide();
    var result = true;
    if ($(".form-email").val().length == 0)  // is empty, note you may think of the text is blank
      result = false;
     else
    if (!$('.newsletter-check2').prop('checked'))  // not checked
      result = false;
    

    if (!result)
      $(".error-message").show(); // show error message
    else $('.newsletter-joined').show(); // success
    return result;
  );
);

【讨论】：

我真的不知道你是不是在跟我开玩笑，请看上面的代码并在评论之前进行比较。