这个表单验证和AJAX提交有什么问题？

Question

I have a simple form at my site which sends it data via Ajax and then slides a message down. 我在我的网站上有一个简单的表单，它通过Ajax发送数据然后向下滑动消息。 The sending works fine, and the message slides down, but the validation part does not work. 发送工作正常，消息向下滑动，但验证部分不起作用。 I want it to show an alert if user doesn't fill anything at all to the field. 如果用户没有向场地填充任何内容，我希望它显示警报。

Here's the whole code: 这是整个代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Coming Soon!</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="assets/countdown/jquery.countdown.js"></script>
        <script src="assets/js/script.js" charset="UTF-8"></script>
        <script>

        $(function() {
    $(".submit").click(function() {
      var sposti = $("input#sposti").val();
        if (sposti == "") {
        alert ('Kirjoita nyt jotain herranjestas tuohon!');
        return false;
      }
var dataString = $('#formi').serialize();
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "mailer.php",
    data: dataString,
    success: function() {
     $("#thanks").slideDown('slow');
    }   


  });
  return false;

    });
  });



        </script>


</head>

    <body>
    <div id="thanks" style="width:100%; height:100px; background:url('../img/page_bg_center.jpg') no-repeat center center;
    position:absolute; top:0px; border-bottom:2px solid black; text-align:center; display:none;"><span style="position:absolute; top:30px;">Kiitos! Saat tiedon kun sivusto avautuu :)</span></div>

        <div id="countdown"></div>

        <p id="note"></p>
        <p style="text-align:center; color:#666666; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3);">Haluatko tiedon kun sivusto aukeaa? Anna s&auml;hk&ouml;postisi alle.<br><br></p>
  <form action="#" method="post" style="text-align:center;" id="formi">
        <input type="email" name="sposti">&nbsp;<input type="submit" class="submit" style="width:50px;">
    </form>



    </body>
</html>

Answer 1

you're using the selector $("input#sposti") . 你正在使用选择器$("input#sposti") 。 however, you don't have an element with the id 'sposti`; 但是，你没有id为'sposti`的元素; set your element's id to 'spotsi' and you should be fine. 将你的元素的id设置为'spotsi'，你应该没问题。

Answer 2

it is just fine. 这很好。 you are missing one thing that is $.trim right here 你在这里缺少一个$.trim东西

if ($trim(sposti) == "")

because if someone types spacebar in email it will just let it go 因为如果有人在电子邮件中键入spacebar ，它就会放手

and repalce name="sposti" to id="sposti" as mentioned by sjhonny 并且如sjhonny所述，将name="sposti"重新name="sposti"为id="sposti"

Answer 3

Replace var sposti = $("input#sposti").val(); 替换var sposti = $("input#sposti").val(); with var sposti = $.trim($("input#sposti").val()); with var sposti = $.trim($("input#sposti").val()); to remove blank spaces in the input. 删除输入中的空格。

这个表单验证和AJAX提交有什么问题？

问题描述

3 个解决方案

解决方案1
2 已采纳 2012-06-24 18:30:01

解决方案2
0 2012-06-24 18:30:21

解决方案3
0 2012-06-24 18:47:12

这个表单验证和AJAX提交有什么问题？

问题描述

3 个解决方案

解决方案1 2 已采纳 2012-06-24 18:30:01

解决方案2 0 2012-06-24 18:30:21

解决方案3 0 2012-06-24 18:47:12

解决方案1
2 已采纳 2012-06-24 18:30:01

解决方案2
0 2012-06-24 18:30:21

解决方案3
0 2012-06-24 18:47:12