Question

我在网页上有一个包含几个字段和提交按钮的表单。如果按下提交按钮时字段为空，则每个字段留空的下方都会显示一条小消息，提示用户填写相应的字段。但是，当我单击按钮时，将每个字段留空，我可以看到仅显示一秒钟的消息，之后显示网页的顶部，此表单是其中的一部分。

HTML

<div class = "contacts">
        <div class = "container-fluid">
            <center><text><b>Contact Me!</b></text></center>
            <center><form role="form">
                <div class = "form-group">
                    <label for="inputname"></label>
                    <input type ="text" class = "form-control" id = "inputname" placeholder = "Name" >
                    <span></span>
                </div>


                <div class = "form-group">
                    <label for="inputemail"></label>
                    <input type ="email" class = "form-control" id = "inputemail" placeholder = "Email Address"  >
                    <span></span>
                </div>


                <div class = "form-group">
                    <label for="inputphone"></label>
                    <input type ="number" class = "form-control" id = "inputphone" placeholder = "Phone Number" >
                    <span></span>
                </div>


                <div class = "form-group">
                    <label for="inputmessage"></label>
                    <textarea type ="text" class = "form-control" id = "inputmessage" rows = "5" placeholder = "Message" ></textarea>
                    <span></span>
                </div>

            <div class = "form-group">
                <center><button type="submit">SEND</button></center>
            </div>
        </form></center>
    </div>
</div>

Jquery scipt

$(".contacts button").click ( function () {
                    $("form").submit (function () {
                        if ($ ("#inputname").val() === "") {
                            $("span").text("*Enter your name please!").show();

                        }

                        if ($ ("#inputmail").val() === "") {
                            $("span").text("*Enter your email id please!").show();

                        }

                        if ($ ("#inputphone").val() === "") {
                            $("span").text("*Enter your phone number please!").show();

                        }

                        if ($ ("#inputmessage").val() === "") {
                            $("span").text("*Enter your message please!").show();

                        }

                    });
                });

我应该更改/添加代码以使其工作并保持显示消息？

提前致谢！

Answer 1

我认为问题是页面的提交触发了页面的重新加载。

如果值无效，则需要阻止默认表单提交。

此外，无需点击并提交处理程序

$("form").submit(function() {
  var valid = true,
    fields = {
      inputname: '*Enter your name please!',
      inputemail: '*Enter your email id please!',
      inputphone: '*Enter your phone number please!',
      inputmessage: '*Enter your inputmessage please!',
    };

  $.each(fields, function(key, value) {
    var $field = $('#' + key),
      blank = $.trim($field.val()) === '',
      $span = $field.next('span');
    if (blank) {
      $span.text(value).show()
    } else {
      $span.hide();
    }
  })

  return valid;
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contacts">
  <div class="container-fluid">
    <center>
      <text><b>Contact Me!</b>
      </text>
    </center>
    <center>
      <form role="form">
        <div class="form-group">
          <label for="inputname"></label>
          <input type="text" class="form-control" id="inputname" placeholder="Name">
          <span></span>
        </div>


        <div class="form-group">
          <label for="inputemail"></label>
          <input type="email" class="form-control" id="inputemail" placeholder="Email Address">
          <span></span>
        </div>


        <div class="form-group">
          <label for="inputphone"></label>
          <input type="number" class="form-control" id="inputphone" placeholder="Phone Number">
          <span></span>
        </div>


        <div class="form-group">
          <label for="inputmessage"></label>
          <textarea type="text" class="form-control" id="inputmessage" rows="5" placeholder="Message"></textarea>
          <span></span>
        </div>

        <div class="form-group">
          <center>
            <button type="submit">SEND</button>
          </center>
        </div>
      </form>
    </center>
  </div>
</div>

表单验证不按预期工作

1 个答案: