Joomla form validation missing error message - forms

Question

I am trying to develop my first component for Joomla. I have installed Joomla 3, and things are going pretty good.
I want to add a form validation (client side) on the frontend, where I have a submission form.
My code is:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
The validation works, but does not show any message error - just a field. The HTML for the error field is:
<div id="system-message-container">
<div id="system-message" class="alert alert-error">
<h4 class="alert-heading"></h4>
<div></div>
</div>
</div>
So, how do I add text to the validation? Do I need to create a language file for my component?

Answer 1

You need to change form submit button as input
Try this-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<input type="submit" name="submit" value="Submit" />
</form>
Update:-
You can try this also-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form name="adminForm" id="myForm" method="post" onsubmit="return submitbutton();">
<input id="email" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton() {
var f = document.adminForm;
if (document.formvalidator.isValid(f)) {
document.adminForm.submit();
return true;
}
else {
var msg = new Array();
msg.push('Invalid input, please verify again!');
if($('email').hasClass('invalid')){
msg.push('<?php echo JText::_('Invalid Email')?>');
}
alert (msg.join('\n'));
return false;
}
}
</script>
This will validate form at the client side but not in server side.
For more info check this - http://docs.joomla.org/Form_validation

Answer 2

also make sure you have added this code in the index.php
<jdoc:include type="message" />

Answer 3

I've just had this very problem. The issue is that you don't have a label associated with the form field, Joomla validation code builds the error message from the label text.
If you don't want the label to appear then set it to hidden (if you're using bootstrap use the hidden class). You must add a for clause to the label. If you also give it an id which is the set to the input id + '-lbl', then it will optimise the speed of the label lookup.
<form class="form-validate" id="myForm" method="post">
<label class="hidden" for="inputid" id="inputid-lbl">Form label</label>
<input id="inputid" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>