eForm - Doesn't Remember "Input Type=?" Values on Error

- 953 Posts
iusemodx Reply #1, 9 years, 3 months ago
Testing my form and pulling out my hair.

Every time I make a mistake (on purpose) to check that the form works correctly I have to re-type every "input" box.

This is extremely annoying. I hadn't noticed this prior to today, as my forms are usualy extremely easy to use - standard contact forms mainly.

This current form is extremely complicated and has numerous fields that need manual input.

What was strange is all of the select and textareas keep their content when the form is submitted even when it has errors.

As I added HTML5 input types today (as posted here) I started to look a little closer.

I am not a php'er so if you use the code as is let someone take a quick glance to ensure it's OK. I've now been using the form since posting this info and as of yet had no problems whatsoever (almost 4 days).

Note - the following changes are based on my HTML5 additions.

Change this:
```
case 'text':
    if($name=='vericode') return "<input$t value=\"\" />";
    //else pass on to next
// Added HTML5 types 29.01.2015
case 'email':
case 'url':
case 'date':
case 'number':
case 'search':
case 'color':
case 'range':
case 'time':
case 'month':
case 'week':
case 'datetime':
case 'datetime-local':
case 'tel':
    return "<input$t value=\"\" />";
    //else pass on to next
// End - Added HTML5 types
```
Into this:
```
case 'text':
    if($name=='vericode') return "<input$t value=\"\" />";
    //else pass on to next
// Added HTML5 types 29.01.2015
case 'email':
case 'url':
case 'date':
case 'number':
case 'search':
case 'color':
case 'range':
case 'time':
case 'month':
case 'week':
case 'datetime':
case 'datetime-local':
case 'tel':
    return "<input$t value=\"[+$name+]\" />";
    //else pass on to next
// End - Added HTML5 types
```
The change is the bottom return - the value has changed from
this:
```
return "<input$t value=\"\" />";
```
to this:
```
return "<input$t value=\"[+$name+]\" />";
```
What this does is: when you submit your form, all of the values are kept intact, even if they are wrong.

So what we now have to do is when the errors are shown after submitting the form, we need to use the default "required" and "invalid" classes to emphasise the element that is invalid or required.

If you take a look at the snippet code you will find this:
```
'requiredClass' => isset($requiredClass)?$requiredClass:"required",
'invalidClass' => isset($invalidClass)?$invalidClass:"invalid",
```
You can obviously override it by adding your own class names in your snippet call, for example:
```
[!eForm? &requiredClass=`needed` &invalidClass=`wrong`!]
```
[ed. note: iusemodx last edited this post 9 years, 3 months ago.]
Download the latest Evo release
Report an issue about Evo
Read the Evo documentation

953 Posts

iusemodx Reply #2, 9 years, 3 months ago

An example:

The form:

<form method="post" action="[~[*id*]~]">
  [+validationmessage+]
  <input type="hidden" name="formid" value="Contact Form">
  <label for="title">Title</label>
  <select name="title" id="title" eform="Title:listbox:0">
    <option value="" selected="selected" disabled="disabled">Please select a title</option>
    <option value="Mr">Mr</option>
    <option value="Mrs">Mrs</option>
    <option value="Miss">Miss</option>
    <option value="Ms">Ms</option>
    <option value="Dr">Dr</option>
    <option value="Other">Other</option>
  </select>
  <label for="name">Name <em class="required">*</em></label>
  <input type="text" name="name" id="name" eform="Name:string:1">
  <label for="email">Email <em class="required">*</em></label>
  <input type="email" name="email" id="email" eform="Email:email:1">
  <label for="telnumber">Telephone Number</label>
  <input type="tel" name="telnumber" id="telnumber" eform="Telephone Number:float:0">
  <label for="message">Message <em class="required">*</em></label>
  <textarea rows="5" cols="100" name="message" id="message" eform="Message:string:1"></textarea>
  <input type="submit" value="Send">
</form>

The telephone number requires that it only uses numbers (data type = float) - if you use letters and then submit the form you will get an "invalid" error.

If you take a look at the input field after submitting the form you will see that the field still has the wrong input, but take a look at the source code and you will see that the input now has the default class attached to it (invalid).

So if you don't already have an error or invalid class, simply make one and add it to your stylesheets. [ed. note: iusemodx last edited this post 9 years, 3 months ago.]

Download the latest Evo release
Report an issue about Evo
Read the Evo documentation