如果表单中有错误,那么在提交表单时,对话框应保持打开状态

时间:2014-03-12 20:37:12

标签: javascript php jquery forms

我有一个注册对话框,其中有一个登录表单。 我在与表单相同的文件中做了一些基本的表单验证,如果存在错误,那么在提交表单时,会在字段下面回显相应的消息。

但是,当提交表单时,页面会刷新并关闭对话框,必须再次打开它以便用户查看错误。这不太合适,我想以某种方式在刷新时保持对话框打开,只有表单验证中存在IF错误。

必须有办法解决这个问题,但我不太清楚如何实现这一点。

这是我的代码(index.php):

    // PHP validation

    $fornameErr = $surnameErr ="";
    $forname = $surname="";


    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        if (empty($_POST["forename"])) {
            $fornameErr = "Missing";
        }
        else {
            $forename= $_POST["forename"];
        }

        if (empty($_POST["surname"])) {
            $surnameErr= "Missing";
        }
        else {
            $surname= $_POST["surname"];
        }
}


// Link which opens up the dialog box by calling the 'check_domain_input()' function
<div id="clickable" onclick="check_domain_input()">Or <a href="#">sign up</a></div>

// The form in the dialog box
<div id="dialog" title="Sign up" style="display:none">    
    <center>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div align="center">
       <br/>       
       <input type="text" class="input" name="forename" size="20" maxlength="40" placeholder="Forename" value="<?php echo htmlspecialchars($forename);?>"/> 
        <span class="error"><?php echo $fornameErr ;?></span>
        <br/>
        <input type="text" class="input" name="surname" size="20" maxlength="40" placeholder="Surname" value="<?php echo htmlspecialchars($surname);?>"/> 
        <span class="error"><?php echo $surnameErr ;?></span>
        <br/>

    <input type="submit" value ="Sign up" class="submit"/>
    <br/>
    <br/>
    </div>
  </form>   
  </center>

    </div>


<!-- Dialog box function -->
<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog({modal: true}); 
        var domain_val = document.getElementsByName('domain');       
        if (domain_val[0].value.length > 0)
        {
            return true;
        }     
        $( "#dialog" ).dialog({modal: true});
        return false;
    }

</script>

2 个答案:

答案 0 :(得分:0)

  1. 您可以使用this link所示的onsubmit="return validateFunction()"
  2. 您可以让PHP设置一个jQuery onload函数读取并作出反应的JavaScript变量。
  3. 您可以使用AJAX代替表单提交。使用AJAX,您可以简单地使用AJAX调用的错误函数来对错误的验证做出反应。

答案 1 :(得分:0)

如果您要显示错误,可以在页面加载时调用check_domain_input方法,如下所示:

<script>
    function check_domain_input()
    {        
        ...
    }

<?php if (!empty($fornameErr) || !empty($surnameErr)) : ?>
    $(function() {
        check_domain_input();
    });
<?php endif; ?>
</script>