javascript - 如果表单中出现错误，则提交表单时对话框应保持打开状态

Question

我有一个注册对话框，其中有一个登录表单。 我已经在与表单相同的文件中完成了一些基本的表单验证，如果存在错误，则在提交表单时会在字段下方回显相应的消息。

但是，当提交表单、刷新页面并关闭对话框时，必须再次打开它才能让用户看到错误。这不是很合适，我想以某种方式在刷新时保持对话框打开，只有当表单验证中存在错误时。

一定有办法解决这个问题，但我不太知道如何实现。

这是我的代码(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>

Answer 1

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

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

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