Question

这是我要验证的表单。表单有一个选择菜单，如果我从下拉列表中选择一个选项，它会显示两个文本框和一个选择菜单。提交表单后，页面刷新，我想验证的表单字段也隐藏。

我想要做的是在没有页面刷新的情况下验证表单。

编辑请注意：如果我选择其他选项即IE，Safari除了其他选项并提交验证时也会出现

<html> 
<head>  
<style>
#browserother{display:none;}
.error
{
    color:#F00;
}
</style> 
<?php
$otherbrowser1="";
$otherbrowser1Err="";

if ($_SERVER['REQUEST_METHOD']== "POST") {
   $valid = true;
   if(empty($_POST["ob1"]))
    {
        $otherbrowser1Err="* otherbrowser1 is Required";
        $valid=false;
        echo "<style>#browserother{display:block;}</style>";
    }
    else
    {
        $otherbrowser1=test_input($_POST["ob1"]);
    }
    //if valid then redirect
  if($valid){
      include 'database.php';
      echo '<META HTTP-EQUIV="Refresh" Content="0; URL=success.php">';    
    exit;
  }  
}

function test_input($data)
{
     $data = trim($data);
     $data = stripslashes($data);
     $data = htmlspecialchars($data);
     return $data;
}

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<form id="jsform" method="post" action="<?php htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<p>Chose Your Browser: <select name = "Browser" required>
        <option value = "">-- Select an Option --</option>
        <option value = "1" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "1") echo "selected"; ?>>IE</option>
        <option value = "2" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "2") echo "selected"; ?>>FF</option>
        <option value = "3" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "3") echo "selected"; ?>>Safari</option>
        <option value = "4" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "4") echo "selected"; ?>>Opera</option>
        <option value = "5" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "5") echo "selected"; ?>>Other</option>
        </select>
    </p>
  <div id="browserother">
    Please Specify: <label><input type="text" name="ob1" placeholder="Other Browser1" size="50" /></label>
    <span class="error"><?php echo $otherbrowser1Err?></span>
    <br>
       Please Specify: <label><input type="text" placeholder="Other Browser2" size="50" /></label><br>
 Please Specify: <label>
 <select>
 <option>Select an Option</option>
  <option>Select an Option</option>
 </select>
 </label>
    </div>

  <!--currentstatus starts here-->
<script type="text/javascript">

$('p select[name=Browser]').change(function(e){
  if ($('p select[name=Browser]').val() == '5'){
    $('#browserother').show();
  }else{
    $('#browserother').hide();
  }
});

$('p select[name=OS]').change(function(){
  if ($('p select[name=OS]').val() == 'otheros'){
    $('#osother').show();
  }else{
    $('#osother').hide();
  }
});
</script>
  <!--currentstatus Ends here-->
   <input type="button" value = "Submit" onClick=" document.getElementById('jsform').submit();" />
  </form>
</body>
</html>

Answer 1

PHP基本上刷新页面，你可以使用submitHandler option。基本上将$ .ajax调用放在此处理程序中，即使用验证设置逻辑将其反转。你可以使用这样的代码：

  $('#form').validate(function(){

        ... your validation rules come here,

        submitHandler: function(form) {
            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize(),
                success: function(response) {
                    $('#answers').html(response);
                }            
            });
        }
       return false;
    });

并在你的HTML中

<form id="jsform" method="post" action="">

Answer 2

如果您希望在提交表单之前检查验证，并在验证了您希望提交表单的所有字段后，请改为“onclick”按钮事件，写下表单提交事件或点击按钮事件。

在该事件内部检查验证然后提交表单。如果任何字段无效，则仅从那里返回。

Answer 3

一旦你点击提交按钮，PHP表格就会刷新。所以请在javascript或jquery中进行验证，然后使用php获取表单值。

从提交按钮中删除onclick并向其添加id和name attr

$("#submitbuttonid").click(function(e){

if($('input[name^=ob1]').val() == "")
{
  alert("Other browser is req.");  
 return false;
}

});

Answer 4

提交表单后页面刷新，如上所述使用AJAX，或者在您想要保存的输入中使用

<input type="text" name="whatever_name" value="<?php if (isset($_POST['whatever_name'])) echo $_POST['whatever_name'];?>" />

这种方式，当您提交已提交的数据时，将采用“值”属性的形式。

但我会建议使用ajax，因为它更干净。

Answer 5

很难理解究竟是什么问题。

无论如何，我相信你不想在发生错误时隐藏#browserother？如果是这样，请确保在验证表单时，为#browserother

添加一个显示块

if(empty($_POST["ob1"]))
{
    $otherbrowser1Err="* otherbrowser1 is Required";
    $valid=false;
    echo "<style>#browserother{display:block;}</style>";
}

无论如何，代码非常难看。

下拉列表：

<p>Chose Your Browser: <select name = "Browser" required>
        <option value = "">-- Select an Option --</option>
        <option value = "1" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "1") echo "selected"; ?>>IE</option>
        <option value = "2" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "2") echo "selected"; ?>>FF</option>
        <option value = "3" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "3") echo "selected"; ?>>Safari</option>
        <option value = "4" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "4") echo "selected"; ?>>Opera</option>
        <option value = "5" <?php if(isset($_POST["Browser"]) && $_POST["Browser"] == "5") echo "selected"; ?>>Other</option>
        </select>
    </p>

我没有看到任何其他情况的代码，但只有在选择了最后一个选项时才验证该字段，您应该用以下代码替换代码：

if ($_POST['Browser'] == 5) {
        if(empty($_POST["ob1"]))
        {
            $otherbrowser1Err="* otherbrowser1 is Required";
            $valid=false;
            echo "<style>#browserother{display:block;}</style>";
        }
        else
        {
            $otherbrowser1=test_input($_POST["ob1"]);
        }
}

表示仅在选择最后一个值时才要求验证ob1字段。

Answer 6

你的代码非常杂乱我甚至不知道从哪里开始。你的验证有逻辑缺陷，你混合HTML和PHP有点奇怪，等等。我可以随意重写一下，然后添加了你要求的功能。

通常我不会这样做，但我想向您展示一种更清洁的方式来为将来做这样的任务。当然，这也不是理想的方法（将evertything填充到单个文件中并不是您可能知道的最佳实践）。

为了您的理解，我评论了一切。但基本上我们正在向脚本发送ajax请求。该脚本验证我们的表单并返回一个json响应。这是在客户端和服务器之间管理数据的一种巧妙方法。

然后重定向过程在客户端进行，如果一切正常，则重定向用户。

请注意，我这里没有进行任何安全检查

<?php

// Just a helper function to check if a form field is set and filled
function fieldSet($field)
{
    return isset($field) AND !empty($field);
}

// Our dropdown will be generated from that array
$browsers = array('IE', 'FF', 'Safari', 'Opera', 'Other');

/**
 * Lets process this when a POST Request came in
 */

if($_SERVER['REQUEST_METHOD'] == 'POST')
{   
    // Set JSON Header
    header('Content-Type: application/json');

    // Prepare our response
    $response = array('success' => false);

    // Reassign POST variables just to make it look prettier
    $browser_select = $_POST['browser'];
    $specifications = $_POST['specify'];

    // If a browser has not been selected the user failed hard!
    if(!fieldSet($browser_select) OR $browser_select == 'init')
        $response['errors'][] = 'Please Select a browser';

    // If we selected 'other' check if the hidden form group has any input 
    // and push an error to our $response array if not
    if($browser_select == $browsers[4] AND (!fieldSet($specifications) OR $specifications[2] == 'init'))
        $response['errors'][] = 'Another Browser is required';

    // If we got no errors in our $response array the request was successful
    if(!isset($response['errors']))
        $response['success'] = true;

    // Encode our $response array into the JSON format and 
    // abort script execution
    echo json_encode($response);
    exit;


}


?>
<!DOCTYPE html>
<html>
    <head>
        <title>My Ajax Form</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    </head>

    <body>
        <form action="cleanform.php" method="POST" id="ajax-form">
            <label for="select-browser">Choose your Browser</label>
            <option value="init">Please select a browser</option>               
            <select name="browser" id="select-browser">
                <?php foreach($browsers AS $browser): ?>
                    <option value="<?php echo $browser; ?>"><?php echo $browser; ?></option>
                <?php endforeach; ?>
            </select>
            <hr>
            <div id="hidden-field-group" style="display: none;">
                <label for="specify-1">Please Specify</label>
                <input type="text" name="specify[]" placeholder="Other Browser 1" id="specify-1">
                <br>
                <label for="specify-2">Please Specify</label>
                <input type="text" name="specify[]" placeholder="Other Browser 2" id="specify-2">
                <br>
                <label for="specification-3">Please Specify</label>
                <select name="specify[]" id="specify-3">
                    <option value="init">Please Specify</option>
                    <option value="SP 1">SP1</option>
                    <option value="SP 2">SP2</option>
                </select>
            </div>
            <input type="submit">

        </form>


        <script type="text/javascript">

        $(function(){
            var $form = $('#ajax-form');
            var $browserSelect = $form.find('select[name="browser"]');

            // Hide or Show the second form group
            $browserSelect.on('change', function(){
                $select = $(this);
                if($select.val() == 'Other'){
                    $('#hidden-field-group').show();
                }
                else{
                    $('#hidden-field-group').hide();
                }
            });

            // Here we send a POST Request to the server using AJAX
            $form.on('submit', function(e){
                // Prevent the browser from submitting the form
                // in it's native way
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: $form.action,
                    data: $form.serialize(), //Serialize our form fields
                    success: function(response)
                    {   
                        // Redirect if the server returned no error
                        if(response.success == true)
                            window.location.replace("http://example.com");
                        //otherwise print the error
                        else
                            alert(response.errors[0]);
                    }

                });
            });

        });

        </script>
    </body>
</html>

验证后，php表单不应刷新

6 个答案: