If errors in form, then dialog box should stay open when form is submit

Question

I have a sign up dialog box, which has a login form in it. I have done some basic form validation in the same file as the form, if errors exist then appropriate messages are echo'd out underneath the fields when the form is submit.

However when the form is submit, the page is refreshed and the dialog box closes, it has to be opened again for the user to see the errors. This is not very appropriate and I want to somehow keep the dialog box open on refresh, only IF errors exist in the form validation.

There must be a way around this but I don't quite know how to implement this.

Here is my code (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>

Use something like this: `
` (found at http://stackoverflow.com/questions/8232639/validating-form-before-submitting) — jpodwys, Mar 12 '14 at 20:45
Thanks! I added a better link as the first suggestion in my answer below. If you need more information about any of the three answers, just ask. — jpodwys, Mar 12 '14 at 20:52

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

You can use onsubmit="return validateFunction()" as shown at this link.
You can have PHP set a JavaScript variable that your jQuery onload function reads and reacts to.
You can use AJAX instead of form submissions. With AJAX, you can simply use the AJAX call's error function to react to bad validation.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 12 '14 at 20:51

jpodwys

393
2
11

score 0 · Answer 2 · answered Mar 12 '14 at 20:54

You could call your check_domain_input method as the page loads if you've got an error to show, like this:

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

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

If errors in form, then dialog box should stay open when form is submit

2 Answers2