0

I'm trying to use PureCSS forms in my web app and I can't figure out how to retain the nifty form validation while stopping the page reload.

I know I can stop the page reload using onsubmit="return false;"

Then I can use AJAX to post the form data using onClick="PostSettings();", where PostSettings() is my javascript function containing the AJAX request. I also have to include event.preventDefault(); at the top of that function to stop the reload.

Unfortunately these steps which stop the reload also stop the nice in-built PureCSS validation.

Is there a way to retain that without triggering the page reload or will I need to make my own validation in the javascript?

FYI, here's the html:

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary"
  id="save-simulation-button" onClick="PostSettings();" 
  onsubmit="return false;">
    <i     class="fa fa-save"></i> Submit Simulation Parameters
</button>
miensol
  • 39,733
  • 7
  • 116
  • 112
njachowski
  • 927
  • 5
  • 14

4 Answers4

0

Use 'return false' instead of event.preventDefault() inside the 'PostSettings()' method.

Vignesh Sn
  • 110
  • 8
0

Thanks for your replies Lucas and Vignesh -- they didn't quite solve the problem, but they got me thinking and I developed a solution:

In the html I had to add a return here: onClick="return PostSettings();"

Then in the javascript I return true or false depending on whether or not the form passes validation, which I have to check:

function PostSettings() {
    //event.preventDefault(); <<- commented out per Vigneshs suggestion

    var name = $("#simulation-name").val(); // jquery to get form values
    var description = $("#description").val();

    // Code to validate form: name and description cannot be blank
    if (name === "" || description === "") {
        console.log("name or description fields cannot be blank");
        return true; // <<- returning true allows PureCSS validation to continue
    }

    // Code passed validation so post the data...
    // POST code omitted for brevity

    return false; // <<- returning false stops the page reload
}

So in summary, returning true allows the PureCSS form validation to take place as per normal (and there's no page reload because the form hasn't passed validation). And when the form passes validation I return false to stop the page reload -- this also stops any other default events of the PureCSS form, but that's okay because I manually checked if it validated in the javascript.

Hope this helps others who want to accomplish this in the future!

njachowski
  • 927
  • 5
  • 14
0

You only need a onsubmit="return MyValidFunction();" in the Form tag and nothing else in the "submit" button

When the form is not ok PureCSS make the validation with his message, When All is ok call your "MyValidFunction()" function

function MyFunction() {
   /// your Ajax Code here
   return false;
}

<form class="pure-form" onsubmit="return PostSettings();">
  <input id="form_url" type="url" class="pure-input-1-3">
   <button type="submit" class="pure-button pure-input-1-1">OK</button>
</form>
Mieabeau
  • 1
0

I had the same issue. Adding onsubmit="event.stopPropagation()" in the form tag prevents the refresh when the form is valid, and retains validation flags when it's invalid.

Andre Hofmeister
  • 3,185
  • 11
  • 51
  • 74
Taylor Bevis
  • 1
  • 2