Forums

Is there any possilbe way for the validation to create a popup error message? I like the fact that beside every field it will enter a message, even if you are just moving away from the field and haven't filled out anything. However I have a long form and most of my required fields are at the top. If a user doesn't fill one of the fields out and they hit submit, the forms sits there and appears to do nothing. It would be really nice for an error message to pop up so they would know they have missed something. Any help would be greatly appreciated.

Hi twi,

you may add your error messages to a div with id :

id="CF_LV_ERROR_"+field_id

and the div will appear if the field with id="field_id" has an error!

I didn't make a popup implementation yet!

Regards,
Max

That sounds like it is what I need. However I don't really want to create a div for every required field on the page. Is there a way to make it so that if any required field is blank it puts an error message close or around the submit button that says "check required fields" ?

Hi twi,

No, but you can add a loop to add all divs automatically when page loads, this is a custom solution and so it can't be very easy!

Max

Admin,

I also have a bit of a long form. The validation works great, but when Submit is pressed, I'd like a message to appear down by the Submit button. My form has some file upload fields and there are already warnings placed near the Submit button that ask the user to be patient as the files upload. If they missed a required field near the top of the form, then press Submit, there's no way for them to see that they've missed something.

From an earlier reply you made on this topic, I tried placing the following near the Submit button:

<div id="CF_LV_ERROR"+file_1a></div>

It didn't work. The field in question DID show it's required message up at the top of the form, but no message near the Submit button. Did I make the DIV correctly? I think I might be missing something very simple.

BTW, the form in question has many file upload fields. The server-side validation works perfectly and lets the user know if they missed one of the required file uploads. HOWEVER, when the form data republishes, all the text fields are republished, but the file upload fields DO NOT. This will frustrate a user who has to re-select all those files to upload. THAT'S WHY I ALSO WANT TO SHOW A MESSAGE NEXT TO THE SUBMIT BUTTON THAT ALERTS THE USER THAT THERE ARE MISSING FIELDS. So they can fix the problem, THEN Submit the form.

Thanks!!

Hi ekull25,

I think that the id syntax has to be a little different, the field id must be part of the string so please try

<div id="CF_LV_ERROR_file_1a">Some message here</div>

You are correct that the RePublish doesn't re-load the field values from file iuploads. In fact I'm not sure that the information is available anywhere. The $_FILES array has the file name and the server path but I don't think that the client path is there at all. Perhaps there is ome other way of doing this?

Bob

Hi ekull25,

I've checked that this does work with text inputs but - for some reason - not with file inputs. I can't see why but I built a little code snippet that does the same job. You'd need to extend it to deal with multiple uploads but test first with one.

Here's the complete form HTML for my test form - it just has one text input, one file upload and a submit button.

<?php
$script = "
window.addEvent('domready', function() {

var check_file = function() {
  if ( !$('file_2').value ) {
    $('CF_LV_ERROR_file_2').setStyle('display', 'block');
  } else {
    $('CF_LV_ERROR_file_2').setStyle('display', 'none');
  }
};
$('file_2').addEvent('blur', check_file);
$('submit').addEvent('submit', check_file);

});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_1" name="text_1" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_fileupload">
    <label class="cf_label" style="width: 150px;">Click Me to Edit</label>
    <input class="cf_fileinput cf_inputbox" title="File input error" size="20" id="file_2" name="file_2" type="file" />
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_3" id='submit' type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>
<div id='CF_LV_ERROR_text_1' style='display:none; font-weight:bold; color:red; background-color:yellow; height:20px; ' >Text required in field 1</div>
<div id='CF_LV_ERROR_file_2' style='display:none; font-weight:bold; color:red; background-color:yellow; height:20px; ' >File upload required</div>

You'll see the error divs at the end - they both behave in exactly the same way excpet that the file_2 one is being switched by the script at the beginning of the code. The file input is being checked when it loses focus and when the form is submitted.

Bob

Thanks Bob, I'm working on implementing this on my form. I was able to get it working in a new form, but not in mine. I'm sure it's something small... I'll recheck line-by-line and will keep you posted. Thanks!