Question

我是Jquery的新手。我正在写一张表格。标题和文字（textarea）当我填写字段并单击“发送”时，当我单击“确定”两次以向上滚动页面时，会出现两个警报。现在我填写字段，然后从头开始。

如何确保在两次检查后继续页面？

Jquery的：

    $("#formPages").submit( function(event) {
        var title = $('#title').val();
        var text = $('#text').val();
        if(title == ''){
            $("#titleError").html("<p>Fill Title</p>");
            alert('title empty');
        }       
        if(text == ''){
            $("#textError").html("<p>Fill Text</p>");
            alert('text empty');
        }       
        $("html, body").animate({ scrollTop: 0 }, 600);
        event.preventDefault();          
    });

形式：

<form class="form" id="formPages">
<div>
    <label class="title">Title</label>
    <div id="titleError"></div>
    <input type="text" id="title" name="title" value="">

</div>
<div>
    <label class="title">Text</label>
    <div id="textError"></div>
    <textarea name="text" id="text" rows="14" cols="50"></textarea><br />

</div>
<div>
    <input class="btn btn-success" type="submit" id="submitButton"  name="submitButton" value="Submit">
</div>
</form>

Answer 1

您的event.preventDefault()声明不会提交表单。只有在表单中的内容无效且您不希望提交表单时，才应使用此声明。否则，删除它将允许表单提交到下一页。

Answer 2

在 IF 语句之外，您不应使用event.preventDefault();。您的代码应该像这样工作：

$("#formPages").submit( function(event) {
    var title = $('#title').val();
    var text = $('#text').val();
    if(title == ''){
        $("#titleError").html("<p>Fill Title</p>");
        alert('title empty');
        event.preventDefault(); 
    }       
    if(text == ''){
        $("#textError").html("<p>Fill Text</p>");
        alert('text empty');
        event.preventDefault(); 
    }       
    $("html, body").animate({ scrollTop: 0 }, 600);         
});

尚未对其进行测试但应按预期工作，如果有任何错误则进行评论。要检查textarea或标题是否为空，最好使用if (text.length === 0)和if (title.length === 0)

修改

请查看JSFiddle here以获取有关工作示例的信息，我已使用Chrome，FF和IE对其进行了测试（我知道：D）

Answer 3

首先我建议使用Jquery验证插件，特别是如果你有多个表单，它完全符合你的要求，它会验证表单。

现在针对您的问题，您总是阻止表单提交，因为您总是event.preventDefault()，只有在表单中的内容无效时才需要阻止提交，请尝试这样做：

$("#formPages").submit( function(event) {
    var title = $('#title').val();
    var text = $('#text').val();
    var isValid = true;

    if(title == ''){
        $("#titleError").html("<p>Fill Title</p>");
        alert('title empty');
        isValid = false;
    }    

    if(text == ''){
        $("#textError").html("<p>Fill Text</p>");
        alert('text empty');
        isValid = false;
    }       

    if(!isValid){
        event.preventDefault(); 
        $("html, body").animate({ scrollTop: 0 }, 600);
    }
});

Answer 4

除了DaGhostman已经说过将event.preventDefault（）语句放在每个if语句下面之外，表单标记还没有指定在提交时要做什么。

表格必须在某处张贴，以便处理数据。必须在<form>标记中指定处理文件的名称和交付方法。

你有：

<form class="form" id="formPages">

你应该：

<form class="form" id="formPages" action="yourProcessorFile.php" method="POST">

然后，您必须拥有一个将接收和处理表单数据的PHP文件。注意：

表单数据作为关联数组传递，称为$ _POST。
每个表单元素的name属性成为$ _POST数组中的KEY（或变量名称）
键入字段的值将成为PHP文件中该变量的值。

例如，PHP处理器文件可能如下所示（使用与上面action=属性相同的文件名）：

<强> yourProcessorFile.php

<?php
    $t = $_POST['title'];
    $x = $_POST['text'];

    echo '<h1>Received From Form:</h1>;
    echo 'Title: ' .$t. '<br>';
    echo 'Text: ' .$x. '<br>';

Jquery表单发布错误

4 个答案: