Question

我想让我的所有文本/电子邮件输入表单都有一个必需的属性，然后才能提交＆＃34;提交＆＃34;电子邮件

但由于我使用了一些Ajax来保持页面在按下按钮后无法刷新，因此required属性将无效。

这就是为什么我要求使用Javascript或jQuery（尝试防止电子邮件形式垃圾邮件）的替代方法。

HTML（FORM）

<form id="contact">
    <div class="form-group">
        <label for="name">Voornaam*</label>
        <input name="fn" type="text" class="form-control" id="fn" required>
    </div>
    <div class="form-group">
        <label for="name">Achternaam*</label>
        <input name="ln" type="text" class="form-control" id="ln" required>
    </div>
    <div class="form-group">
        <label for="email">Email-address*</label>
        <input name="email" type="email" class="form-control" id="email" required>
    </div>
    <div class="form-group">
        <label for="message">Bericht*</label>
        <textarea name="message" required class="form-control" id="message" rows="6"></textarea>
    </div>
    <button type="button" onClick="doIets(); this.form.reset();" 
            name="submit" id="submit" class="btn btn-primary">Verstuur  <span id="result"></span></button>
    <div id="result2"></div>
</form>

Ajax脚本

<script type="text/javascript">
function doIets()
{
       console.log("doe iets");

       var data = {
             ck: (new Date()).getTime(),
         fn: $("#fn").val(),
         ln: $("#ln").val(),
         email: $("#email").val(),
         message: $("#message").val()
      };

      $.ajax({
         type: "POST",
         url: "sendmail.php",/*php file path*/
         data: data,
          beforeSend: function(){
           $('#result').html('<img src="loader" style="height:10px;"/>')
          },
         success: function(data){
            $('#result').hide();
            $('#result2').html(data);
         }
         });
      }
</script>

Answer 1

当他们点击提交按钮然后验证表单然后使用您在上面创建的ajax调用提交表单时，您将需要使用e.preventDefault（）。

Answer 2

由于您已经读出了数据，因此您可以通过

检查您的信息是否足够长

data.message.length

如果为0（或低于您定义的阈值），您可以跳过ajax调用并将一些信息返回给用户。

您可能还想先剪裁消息，以确保其中只有空格。

Answer 3

这是我的代码的一部分，我将提交事件绑定到我的表单，并通过循环检查是否有任何必填字段为空或者我是否想做任何此类事情。

这种方式可以帮到你 -

  $('.form .contact-form').submit(function(e) {
    e.preventDefault();
    $('.form .message').eq(0).html("<i>Sending... Please Wait...</i>");

    var form = $(this);
    var validated = true;

    $('input[type="text"]',this).each(function(){
      if($(this).val().length < 1){
        $(this).addClass('error').focus();
        validated = false;
        return false;
      }
    });

    if(validated === true){
      $.post(__asyn.ajaxurl, $('.form form').eq(0).serialize(), function(data, textStatus, xhr) {
        console.log(data);      

        });
    }


  });

Answer 4

只需将onClick="doIets(event);对象传递给您的处理程序function doIets(event) { event.preventDefault(); ... } 然后添加

# Append to your Podfile
post_install do |installer_representation|
    installer_representation.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
        end
    end
end

Ajax之后没有提交按钮的必填字段

4 个答案: