HTML。如何检查用户是否以表格形式输入文字？

Question

因此，我的表单中包含First_Name ， Last_Name ， City和Email 。 我需要检查字段是否为空。

现在，单击提交， GetFbId.php从此处重定向到GetFbId.php ，我将有5个值插入数据库： FB_Id ， First_Name ， Last_Name ， City和Email

Form.html

<!DOCTYPE html>
<html>
  <head>
    <title>Registracija</title>
    <meta name="robots" content="noindex, nofollow">

    <!-- include css file here-->
   <link rel="stylesheet" href="css/style.css"/>

    <!-- include JavaScript file here-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/registration.js"></script>

  </head>   
  <body>
    <div class="container">
        <div class="main">
          <form class="form"  method="post" action="#">
            <h2>Registracijos forma</h2><hr/>
            <label>First Name: </label>
            <input type="text" name="first_name" id="first_name" required>

            <label>Last Name: </label>
            <input type="text" name="last_name" id="last_name" required>

            <label>City: </label>
            <input type="text" name="city" id="city" required>

            <label>Email: </label>
            <input type="text" name="email" id="email" required>

            <input type="submit" name="register" id="register" value="Register">
          </form>   
        </div>
   </div>
  </body>
</html>

如您现在所见，它具有action="GetFbId.php" 。 我有JS脚本来检查它，但是它对我不起作用。 JS称为： registration.js

我包括在Form.html <head>标记内，如下所示：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/registration.js"></script>

并且我尝试使用action="#">来代替action="GetFbId.php"> ，但是在这种情况下，单击提交按钮后什么也没有发生。

registration.js *看起来像：

$(document).ready(function(){

$("#register").click(function(){
    var first_name = $("#first_name").val();
    var last_name = $("#last_name").val();
    var city = $("#city").val();
    var email = $("#email").val();

    if( first_name =='' || last_name =='' || email =='' || city =='')
        {
          alert("Fill all fields.");
        }   
    else if((first_name.length)<3)
        {
            alert("Too short first name.");
        }

    else if((last_name.length)<4)
        {
            alert("Too short last name.");
        }   
    else 
       {
         $.post("GetFbId.php",{first_name: first_name, last_name: last_name, city: city, email: email},
          function(data) {
           if(data=='Success')
           {
            $("form")[0].reset();
           }
           alert(data);
        });
       }

    });

});

在GetFbId.php我尝试在以下变量中获取变量：

$first_name = $_POST['first_name']; 
$last_name = $_POST['last_name']; 
$city = $_POST['city']; 
$email = $_POST['email'];

但是，当单击“提交”按钮时，没有任何动作（什么也没有发生）。 您有解决方法的想法吗？

Answer 1

您需要阻止默认的提交操作。 否则，无论您使用JavaScript做什么，单击按钮都将提交表单。 您的脚本既可以验证输入，也可以使用jQuery的.post（），因此您需要使用以下命令来阻止默认的提交操作：

event.preventDefault();

我也建议验证失败时返回false。

更新的JavaScript：

$(document).ready(function () {

    $("#register").click(function () { 
        event.preventDefault(); // <--  ADDED THIS LINE
        var first_name = $("#first_name").val();
        var last_name = $("#last_name").val();
        var city = $("#city").val();
        var email = $("#email").val();

        if (first_name == '' || last_name == '' || email == '' || city == '') {
            alert("Fill all fields.");
            return false; // <-- ADDED THIS LINE
        } else if ((first_name.length) < 3) {
            alert("Too short first name.");
            return false; // <-- ADDED THIS LINE
        } else if ((last_name.length) < 4) {
            alert("Too short last name.");
            return false; // <-- ADDED THIS LINE
        } else {
            $.post("GetFbId.php", {
                first_name: first_name,
                last_name: last_name,
                city: city,
                email: email
            },

            function (data) {
                if (data == 'Success') {
                    $("form")[0].reset();
                }
                alert(data);
            });
        }

    });

});

观看演示： http : //jsfiddle.net/BenjaminRay/n6jqvrra/

您还可以通过在必填字段中添加“必填”，让浏览器为您处理必填字段。 然后，您只需要处理$ .post（）方面。 但是，并非所有旧版浏览器（例如IE8）都支持此功能，因此不能保证阻止表单以空值提交。

例如：

<input type="text" name="first_name" id="first_name" required>

并且，当然，您还需要在服务器端（PHP）上验证输入。

Answer 2

在表单中添加一个ID：

<form class="form" id="form_id" method="post" action="GetFbId.php">

现在，而不是捕捉click事件#register ，尝试捕捉submit 表单的事件。

$('#form_id').submit(function(evt) { // Better to use a form id
    // First, avoid the form being submitted normally (forms change the website from which they are submitted)
    evt.preventDefault();

    // Now do your form checking...
});

因此您的代码将如下所示：

的HTML

<form class="form"  method="post" action="GetFbId.php" id="form_id">
<h2>Registration</h2><hr/>
<label>First Name: </label>
<input type="text" name="first_name" id="first_name">

<label>Last Name: </label>
<input type="text" name="last_name" id="last_name">

<label>City: </label>
<input type="text" name="city" id="city">

<label>Email: </label>
<input type="text" name="email" id="email">
<input type="submit" name="register" id="register" value="Register">
 </form>

Registration.js

$(document).ready(function(){
    $("#form_id").submit(function(){ // Note the "submit" event OF THE FORM
        var $form = $(this); // Save the context of the form
        event.preventDefault(); // Prevent the form from being submitted normally

        var first_name = $( '#first_name' ).val();
        var last_name  = $( '#last_name' ).val();
        var city       = $( '#city' ).val();
        var email      = $( '#email' ).val();

        if (
            first_name.length == 0
            ||
            last_name.length == 0
            ||
            email.length == 0
            ||
            city.length == 0
        )
        {
            alert('All fields are required.');
        }
        else if ( first_name.length < 3 ) alert('First name is too short');
        else if ( last_name.length < 4 ) alert('Last name is too short');
        else 
        {
             $.post( "GetFbId.php", $form.serialize() )
                 .done(function(data) {
                     alert(data); // Print what the server returns
                })
                .fail(function() {
                     alert('An error has occured');
                })
             ;
        }
    });
});

HTML。如何检查用户是否以表格形式输入文字？

问题描述

2 个解决方案

解决方案1
0 2015-03-24 13:21:06

解决方案2
-1 2015-03-24 13:35:10

HTML。 如何检查用户是否以表格形式输入文字？

问题描述

2 个解决方案

解决方案1 0 2015-03-24 13:21:06

解决方案2 -1 2015-03-24 13:35:10

HTML。如何检查用户是否以表格形式输入文字？

解决方案1
0 2015-03-24 13:21:06

解决方案2
-1 2015-03-24 13:35:10