Question

这里用于验证我使用onsubmit事件。但任何它不起作用。我只想检查文本框是否为空。

    <!DOCTYPE html>
    <html>
    <head>
        <title>temple3</title>
        <link rel="stylesheet" type="text/css" href="temple3css.css">
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    </head>
    <body>
        <div id="popup-content" class='container'>
    <div id="container1">
    <form id="form" class="form"  onsubmit="return validateForm()">

    <h1>Feedbak Form</h1>
    <div class="content">
        <div class="intro"></div>
        <div id="section0" >
            <div class="field roption">
            <input type="radio" name="view" value="public"  checked="checked"> <span>Public</span>
            <input type="radio" name="view" value="private" ><span>Private</span>
            </div>
            <div class="field category">
            <label for>Category:</label>
            <select class="dropDownCate" autofocus>
            <option value="bug">Bug</option>
            <option value="1">1</option>
            <option value="2">2</option>
            </select>
            </div>
            <div class="field message">
            <label for="Comments">Comments:</label>
            <textarea id="comments" name="Comments" placeholder='Your Feedback Here!' autofocus></textarea>
            </div>
            <div class="field">
            <label for="Email">Email</label>
            <input type="email" id="email" name="Email" placeholder="example@stevens.edu(optional)" autofocus>
            </div>
            <div class="field"><input type="submit" id="submit-feedback-button"  autofocus></div>
        </div>
    </div>

</form>
 </div>
    </div>
 <div id="popup-overlay-bg"> </div> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            function validateForm(){
                var texbox=document.getElementById("comments").value;
                if(texbox == "") {
                    document.getElementById("comments").focus();
                    // document.getElementById("comments").style.border = "1px solid #ff0000";
                    return false;
                }
            }
        $(document).ready(function(){
            $("#feedback-button").click(function(){
               openfeedbackform();
            });
           $("#popup-overlay-bg").click(function(){
               closefeedbackform();
           });
            $("#submit-feedback-button").click(function(){
               // closefeedbackform();
            });
            $(window).resize(function(){
              updatefeedbackform();   
            });
                $("#submit-feedback-button").click(function(){
                 var category=$(".dropDownCate").val();
                 var  roption=$('input:radio[name=view]:checked').val();
                 var message=$("#comments").val();
                 var email=$("#email").val();

                    $.ajax({
                  type: "POST",
                  url: "feedback.php",
                  data: "category="+category+ "&roption="+roption+ "&message="+message+ "&email="+email,

                  success:function(result)
                  {
                    if(result=="true"){
                      $("#form").hide();
                        $("#container1").html("<h3>Thank you for your feedback We will get back to you ASAP</h3> ");
                    }
                    else{
                         $("#form").hide();
                      $("#container1").html("<h3> database error </h3>");
                    }
                  }
                 });
                    return false;
            });

        });
             function openfeedbackform(){
                 $("#popup-content").find('input:text').val('');
                 $("#popup-content").fadeIn();
                 $("#popup-overlay-bg").fadeIn();
                 updatefeedbackform();
             }
            function updatefeedbackform(){
                $popup=$("#popup-content");
                var top = "50px";
                var left = ($(window).width() - $popup.outerWidth()) / 2;
    $popup.css({
        'top' : top,
        'left' : left
    });
            }
            function closefeedbackform(){
                  $("#popup-content").fadeOut();
                $("#popup-overlay-bg").fadeOut();
            } 
        </script>   
    </body>
    </html>

之前我使用相同的表格验证。但我不知道为什么它不在这里工作。我试图调试，但功能尚未调用。

Answer 1

问题是你在按钮点击事件中进行ajax提交，而不是在表单提交中。

在提交事件处理程序之前触发单击处理程序，因此验证没有任何效果。

解决方案是使用表单提交事件处理程序进行验证和下面给出的ajax调用，然后就不需要像onsubmit="return validateForm()"

这样的内联事件处理程序

$("#form").submit(function () {
    if (validateForm() === false) {
        return false;
    }

    var category = $(".dropDownCate").val();
    var roption = $('input:radio[name=view]:checked').val();
    var message = $("#comments").val();
    var email = $("#email").val();

    $.ajax({
        type: "POST",
        url: "feedback.php",
        data: "category=" + category + "&roption=" + roption + "&message=" + message + "&email=" + email,

        success: function (result) {
            if (result == "true") {
                $("#form").hide();
                $("#container1").html("<h3>Thank you for your feedback We will get back to you ASAP</h3> ");
            } else {
                $("#form").hide();
                $("#container1").html("<h3> database error </h3>");
            }
        }
    });
    return false;
});

onsubmit validateForm funxtion无效

1 个答案: