CODEWITHSUNDEEP
javascriptphpjqueryhtml
R. Kelly
R. Kelly

Reputation: 93

PHP Prevent Page Refresh/Load after Submit

I'm trying to validate the fields in a form using PHP, but I need something similar to e.preventDefault() to stop the page from refreshing/loading if there are errors in the validation. I'm not very familiar with JavaScript/jQuery, so I'd prefer to handle all of the POST data with PHP (if possible). I was trying to run the checkForm() function on submit, but I realized it was always returning true since it runs before the data gets posted. I also thought about creating a JS function to call e.preventDefault(), but I think my only option would be a (#form).submit() function and I want to avoid having to retrieve and post data in JS/jQuery because some elements are DOM elements and I'm not sure how to access them in JS/jQuery.

To give you an idea of the DOM elements I'm working with, here's a jsfiddle that creates rows dynamically:

https://jsfiddle.net/hnj6ed1y/52/

There could be multiple rows and the fields have similar names (ie: textfield1, textfield2, etc.).

Any ideas? Thank you in advance for all of your help!

    <?php

    // setting initial variables here

    ?>

    <script>

    var isDateTimeValid = true;

    function checkDates(val) {

        if (val == false) {
            isDateTimeValid = false;
        }
        else {
            isDateTimeValid = true;
        }
    }


    function checkForm () {

        if (isDateTimeValid == true) {
            return true;
        }
        else {
            alert("Please check date/times");
            return false;
        }
    }
    </script>

    <?php

    if(isset($_POST['next'])){

        // Validating POST data here

        $dateValid = convertOORDateTime($date1, $time1, $date2, $time2);

        if ($dateValid < 1) {
            echo "<script> checkDates(false); </script>";
            $errors[] = 'Please make sure your dates are correct';
        }
        else {
            echo "<script> checkDates(true); </script>";
        }

    }

    $err_msg = '';

    if(!empty($errors)){

        // want to stop page refresh/load here

        $err_msg = '<p class="error">'.implode('<br />', $errors).'</p>';   
    }

    ?>

    <!DOCTYPE html>
    <form name="form1" id="form1" method="post" action="<?php print $thispage;?>" onsubmit="return checkForm()">

        <?php echo $err_msg; ?>

    </form>

Upvotes: 1

Views: 2174

Answers (2)

Brian
Brian

Reputation: 1025

You should keep your validation checks client/server separate. Use JS prior to submit and PHP after. Don't intertwine the two. When you call JS through php the server has to send a response to the browser (client) for anything to happen, thus reloading the page.

Example: echo "<script> checkDates(false); </script>"; Echo() sends output to the browser (client). Which in this instance requires JS to run a function.

Use on.(Blur) to do simple validation in real time prior to submit. Once submitted then you use PHP server side validation. Never rely on the client. JS can be turned off, edited etc via the browser.

<form>
  <input tabindex="1" id="field1" type="text" name="field1" value="value 1" required />
  <input tabindex="2" id="field2" type="text" name="field2" value="value 2" required />
  <input tabindex="3" type="text" name="field3" value="value 3" />
  <input tabindex="4" type="submit" name="submit" value="Submit" />
</form>

<script>
/* Simplistic validation */
jQuery(document).ready(function($){
  jQuery(document).on("blur", "#field1", function(){
    // validate this field

  });

  jQuery(document).on("blur", "#field2", function(){
    // validate this field

  });

});
</script>

Upvotes: 0

Khanh Truong
Khanh Truong

Reputation: 46

It's weird when your checkForm can't prevent the form submission. Your JS code may throw error and then the code is continued to run.

The easy way is changing the submit button to normal button. Form will not automatically submit when you click normal button. Once the validation is okay, you could manually submit the form by jquery.

$('#button-id').click(function(){
    var valid = true;
    // perform the validation here, for example
    if($('something').val() == "") {
        valid = false;
        // notice user the error
    }
    // Continue to validate

    // Finally, check the valid
    if(valid) {
        ('#form-id').submit();
    }
});

In the validation part, you could probably use jQuery validation, then you could do as followed

var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
   if(form.valid()) {
       form.submit();
   }
});

Upvotes: 2

Related Questions