Question

我在php文件中有一个表单。

在该表单中，表格包含必需的 SELECT 元素和必需的 INPUT TEXT 元素。

同样在桌子下方，我有一个提交按钮。

提交可以完美地检查表单中的必填字段是否具有值，并提醒用户任何元素需要值。

问题：

我想要另一个按钮来基本上检查提交按钮的功能，即提醒我哪些必填字段需要值但不提交表单。

基本上是：

单击“提交”按钮时会调用哪些函数，以便我可以使用检查表单的方法来完成。

ContactCard.php

<?php
    require_once("config.php");

    //Connect to our database
    $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

    //Return an error if we have connection issues
    if ($mysqli->connect_error)
    {
        die('Connect Error (' . $mysqli->connect_errno . ') '. $mysqli->connect_error);
    }

    //Query the database for the results we want
    $query = $mysqli->query("SELECT field FROM `contact_fields`");

    //Create an array of objects for each returned row
    while($array[] = $query->fetch_object());

    //Remove the blank entry at end of array
    array_pop($array);

    //Print our array results
    //print_r_html($array);
?>

<?php
    //Free result set and close connection 
    $query->close();
    $mysqli->close();
?>

<html>
<head>
<title>Add a Contact</title>
<link <link rel="stylesheet" type="text/css" href="ContactCard.css">
<script>
function addOptRow()
{

    var optTable        = document.getElementById("optTable");
    var optTableRows    = optTable.rows.length;
    var newOptRow       = optTable.insertRow(optTableRows);


    //create the dropbox fields for the new row
    var optFieldNames   = document.createElement("select");
    optFieldNames.name  = "optFieldNames";
    optFieldNames.options[optFieldNames.options.length] = new Option("",null);
    "<?php foreach($array as $option) : ?>"
        optFieldNames.options[optFieldNames.options.length] = new Option("<?php echo $option->field; ?>",null); 
    "<?php endforeach; ?>"  
    var optFieldNamesCell   = newOptRow.insertCell(0);
    optFieldNamesCell.appendChild(optFieldNames);

    //create the field value for the new row
    var optFieldValue   = document.createElement("input");
    optFieldValue.type  = "text";
    optFieldValue.name  = "optFieldValue";
    optFieldValue.required  = "true";
    var optFieldValueCell   = newOptRow.insertCell(1);
    optFieldValueCell.appendChild(optFieldValue);

    //create the field remove for the new row
    var optFieldRemove  = document.createElement("input");
    optFieldRemove.type = "button";
    optFieldRemove.value    = "Remove";
    optFieldRemove.onclick  = function(){removeOptRow(this);}
    var optFieldRemoveCell  = newOptRow.insertCell(2);
    optFieldRemoveCell.appendChild(optFieldRemove);
}

function removeOptRow(removeButton)
{
    var optTable = document.getElementById("optTable");
    optTable.deleteRow(removeButton.parentNode.parentNode.rowIndex);
}

function checkAllFieldsComplete()
{
    //if(!isset( stuck here :(
}
</script>

</head>

<body>
    <h1 id="title" >Add A Contact</h1>

    <form>  
    <fieldset id="reqFields">
    <legend>Required Fields</legend>
    <table id="reqTable">
    <tr>
        <td>Company Name</td><td><input type="text" required></input></td>
    </tr>
    <tr>
        <td>Company Code</td><td><input type="text" required></input></td>
    </tr>
    </table>
    </fieldset>


    <fieldset id="optFields">
    <legend>Optional Fields</legend>
    <table id="optTable">
    <tr><th></th><th></th><th><input type="button" value="Add" onclick=addOptRow()></button></th></tr>  
    </table>
    </fieldset> 
    <input type="submit"></input>   
    </form> 


    <div id="test" name="test">
    </div>
</body>

</html>

Answer 1

您可以通过多种方式使用required

首先使用表单验证

<input type="text" required>

你可以使用java脚本进行客户端验证以获得即时响应，如果没有填写，你也会找到很多解决方案

javascript validation for empty input field

否则你必须在服务器端

Answer 2

要回答关于“html”的问题，您可以通过以下方式点击按钮来调用javascript：

<input type="submmit" onclick="java_validation_function();" />

基本上你有两种可能性：

将所有内容发布到PHP并检查POST变量是否存在，如果不存在则返回错误页面
在提交给服务器之前使用javascript进行检查。您可以对此使用jquery验证，并在INPUT上的onclick参数上调用jquery验证。

在这里，您将找到一个jquery / validation示例：http://docs.jquery.com/Plugins/Validation

Answer 3

你可以用脚本这样做。

它检查validate是否返回true或false。

$('#send').click(function(e) {
    e.preventDefault();
    if (validate()) {
        $('#myForm').submit();
    }
});

此函数返回true或false。如果id="field"的输入为空，则返回false。

function validate() {
    ok = true;

    if ($('#field').val() == "") {
        $('#field').attr({
            placeholder: 'Required'
        });
        ok = false;
    }
    return ok;
}

检查是否输入了必填字段

3 个答案: