Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>When loading the page, couldn't you create a hidden form value or js variable in which you store the initial/default value for the field? When they change the form field, validate it, and if it passes, update the hidden field or js variable to match that in the field they updated. </p> <p>When the input given by the user fails validation, show the invalid entry along with the error message and then update the form field back to the value you have saved which would be either the default value or the last valid value that they entered.</p> <p><strong>EDIT:</strong><br> Note that this is only a quick and (very) dirty example of doing what I explained in my answer above. If you have a lot of inputs, you will probably want to store the values in an associative array instead of in hidden form values, but this should give you a good handle on what I am suggesting. I would also strongly encourage you to NOT use alert boxes for notification of invalid answers.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function validate() { var field1 = document.getElementById("field1"); var saved = document.getElementById("field1_save"); if (field1.value &lt; 0 || field1.value &gt; 10) { alert("Field1 value of " + field1.value + " is invalid"); // Change the value back to the previous valid answer field1.value = saved.value; return false; } // Save the valid input saved.value = field1.value; return true; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; Test User Input &lt;form name="form1" id="form1" method="post"&gt; &lt;input name="field1" id="field1" type="text" value="2" onblur="validate();"/&gt; &lt;input name="field1_save" id="field1_save" type="hidden" value="2" /&gt; &lt;input name="btnSubmit" type="submit" value="Submit" /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload