如何在PHP验证后自动将光标聚焦在输入字段上

时间:2014-03-03 06:25:09

标签: php html forms

如何在PHP验证后自动将光标聚焦在输入字段上。如果用户输入了错误的答案,我希望在页面加载时关注该字段。

我是PHP的新手。我怎么能用PHP做到这一点?

联系表格:

<form method="post" action="<?php htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <fieldset style="width:960px; background-color:#FFF; border-radius:10px; padding:50px;">
        <legend><h2>Contact Us</h2></legend>
        <br />
        <fieldset style="border-radius:10px; padding:50px 0px 50px 50px;;";>
            <div style="width:275px; height:300px; float:right; padding:30px"><img src="images/contactus.jpg" width="275" height="300" alt="contactus" /></div>
            <label>Name:</label>
            <input class="txt" type="text" name="name" value="<?php echo isset($_POST['name']) ? htmlentities($_POST['name']) : ''; ?>"/><span class="error"><?php echo $nameErr?></span><br /><br />
            <label>Email:</label>
            <input class="txt" type="text" name="email" value="<?php echo isset($_POST['email']) ? htmlentities($_POST['email']) : ''; ?>"/><span class="error"><?php echo $emailErr?></span><br /><br />
            <label>Mobile No:</label>
            <input class="txt" type="text" name="mobileno" value="<?php echo isset($_POST['mobileno']) ? htmlentities($_POST['mobileno']) : ''; ?>"/><span class="error"><?php echo $mobilenoErr?></span><br /><br />
            <label>Message:</label>
            <textarea class="txt" name="message"rows="5"><?php echo $message?></textarea><span class="error"><?php echo $messageErr?></span><br /><br />
            <input style="margin-left:100px; padding:5px 20px 5px 20px; border-radius:5px" type="submit" value = "Submit" />
        </fieldset>
    </fieldset>
</form>

PHP中的联系表单验证:

<?php
if(isset($_POST['name']))
{
    include_once("config.php");

    $name=$email=$mobileno=$message=="";
    $nameErr=$emailErr=$mobilenoErr=$messageErr="";

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

    if($_SERVER['REQUEST_METHOD']=="POST")
    {
        $valid=true;

        //name validaton
        if(empty($_POST["name"]))
        {
            $nameErr="* Name is Required";
            $valid=false;
        }
        else
        {
            $name=test_input($_POST["name"]);
            if (!preg_match("/^[a-zA-Z ]*$/",$name))
            {
                $nameErr = "&nbsp;&nbsp;Only letters and white space allowed";
                $valid=false;
            }
        }

        //Email Address validaton
        if(empty($_POST["email"]))
        {
            $emailErr="* Email is Required";
            $valid=false;
        }
        else
        {
            $email=test_input($_POST["email"]);
            if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email))
            {
                $emailErr="&nbsp;&nbsp; Enter a valid Email ID";
                $valid=false;
            }
        }

        //Mobile no validaton
        if(empty($_POST["mobileno"]))
        {
            $mobilenoErr="* Mobile no is Required";
            $valid=false;
        }
        else
        {
            $mobileno=test_input($_POST["mobileno"]);
            if(!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$mobileno))
            {
                $mobilenoErr="*Enter a valid contact no";
                $valid=false;
            }
        }

        //bank name validation
        if(empty($_POST["message"]))
        {
            $messageErr="* Message is Required";
            $valid=false;
        }
        else
        {
            $message=test_input($_POST["message"]);
        }
    }

    if($valid)
    {
        echo "Send mail code";
    }
}
?>

3 个答案:

答案 0 :(得分:2)

您可以尝试自动对焦(http://diveintohtml5.info/forms.html):

<input class="txt" type="text" name="name" 
   value="<?php echo isset($_POST['name']) ? htmlentities($_POST['name']) : ''; ?>"
   <?php if(!empty($nameErr)) { ?> autofocus <?php } ?>
/>

<span class="error"><?php echo $nameErr?></span><br /><br />

答案 1 :(得分:1)

这只是html选项自动对焦

Here你可以找到一个很好的解释

<input type="text" name="fname" autofocus>

或者你可以使用javascript,如果IE出现问题或你没有用html5编码:

<body OnLoad='document.getElementById("txt").focus();'>

但是如果你想这样做,你必须为你的输入字段设置一个id。

答案 2 :(得分:1)

HTML5自动对焦功能,如果Ramesh建议的逻辑是正确的;但是,对于与html混合的if语句,代码并不完全正确。而不是正常的大括号,你需要使用冒号并添加php endif语句。试试这个:

<input class="txt" type="text" name="name" 
   value="<?php echo isset($_POST['name']) ? htmlentities($_POST['name']) : ''; ?>"
   <?php if(!empty($nameErr)): ?> autofocus <?php endif; ?>
/>
<span class="error"><?php echo $nameErr; ?></span><br /><br />