I'm using PHP and smarty. I'm bit new to jQuery. I've written a function in jQuery and calling this function on form submit. Currently I'm showing the error message in alert. But the requirement is it should be displayed above the form and the field having error should get highlighted. The font colour should be red in both cases. For your reference I'm pasting my smarty template code(i.e form code).
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td align="left" valign="top"><h3>Contact Lists >> {$bread_crumbs_text}</h3></td>
</tr>
<tr>
<td valign="top">
<table width="99%" border="0" cellpadding="0" cellspacing="0" class="manage_box" >
<tr>
<td>
<div id="contact_list_import">
<form name="manage_contact_list_import" id="manage_contact_list_import" action="contact_list_import.php" method="post">
<input type="hidden" name="op" id="op" value="{$op}">
<input type="hidden" name="contact_list_id" id="contact_list_id" value="{$contact_list_id}">
<input type="hidden" name="form_submitted" id="form_submitted" value="yes">
<table width="99%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td colspan="3" class="errorMsg">{$error_msg.error_msgs}</td>
</tr>
<tr height="30" id="user_option">
<td width="300">
<input type="checkbox" id="users" name="users_choice" value="users"/>Users
</td>
<td> <input type="checkbox" id="upload_from_file" name="users_choice" value="upload_from_file"/>Upload From File
</td>
<td>
<input type="checkbox" id="copy_paste_from_excel" name="users_choice" value="copy_paste_from_excel"/>Copy paste from excel
</td>
</tr>
<tr><td colspan="5"> </td></tr>
<table border="0" width="80%" class="option_users">
<tr height="30">
<td align="left" width="80%" colspan="5">
<h4>Users</h4>
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="all_users" value="all_users"/>all users
</td>
</tr>
<tr><td colspan="5"> </td></tr>
<tr height="30">
<td align="left" width="20%">
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="registered_users" value="registered_users"/>Registered users
</td>
<td valign="middle" align="left" width="10%"><b>From Date </b> : </td>
<td align="left" > <input type="text" style="width:100px;" class="inputfield" name="registered_users_from_date" id="registered_users_from_date" maxlength="10" width="20%"></td>
<td valign="middle" align="left" width="10%"><b>To Date </b> : </td>
<td> <input type="text" style="width:100px;" class="inputfield" name="registered_users_to_date" id="registered_users_to_date" maxlength="10" width="20%"></td>
</tr>
<tr><td colspan="5"> </td></tr>
<tr height="30">
<td align="left" width="20%">
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="logged_in_users" value="logged_in_users"/>Logged-in users
</td>
<td valign="middle" align="left" width="10%"><b>From Date </b> : </td>
<td align="left" > <input type="text" style="width:100px;" class="inputfield" name="registered_users_from_date" id="logged_in_users_from_date" maxlength="10"></td>
<td valign="middle" align="left" width="10%"><b>To Date </b> : </td>
<td> <input type="text" style="width:100px;" class="inputfield" name="registered_users_to_date" id="logged_in_users_to_date" maxlength="10"></td>
</tr>
<tr><td colspan="5"> </td></tr>
<tr height="30">
<td align="left" width="20%">
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="not_logged_in_users" value="not_logged_in_users"/>Not logged-in Users
</td>
<td valign="middle" align="left" width="10%"><b>From Date </b> : </td>
<td align="left" > <input type="text" style="width:100px;" class="inputfield" name="not_logged_in_users_from_date" id="not_logged_in_users_from_date" maxlength="10"></td>
<td valign="middle" align="left" width="10%"><b>To Date </b> : </td>
<td> <input type="text" style="width:100px;" class="inputfield" name="not_logged_in_users_to_date" id="not_logged_in_users_to_date" maxlength="10"></td>
</tr>
<tr><td colspan="5"> </td></tr>
<tr height="30">
<td width="300" colspan="5">
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="never_logged_in_users" value="never_logged_in_users"/>Never logged-in Users
</td>
</tr>
<tr><td colspan="5"> </td></tr>
<tr height="30">
<td width="300" colspan="1">
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="package_purchase" value="package_purchase"/>Package purchase
</td>
<td align="left" colspan="4">
<select name="test_pack_type_id" id="test_pack_type_id">
<option value="">All</option>
{if $all_type}
{foreach from=$all_type item="type"}
<option value="{$type.package_type_id}">{$type.package_type_name}</option>
{/foreach}
{/if}
</select>
</td>
</tr>
<tr><td colspan="5"> </td></tr>
<tr height="30">
<td width="300" colspan="5">
<input type="checkbox" class="user_checkbox" name="user_checkbox" id="try_demo_packages" value="try_demo_packages"/>Try demo packages
</td>
</tr>
<tr><td colspan="5"> </td></tr>
</table>
<tr>
<td colspan="5" valign="top" align="center">
<input type="submit" name="submit_value" id="submit_value" value="{$submit_value}" class="submit">
<input type="button" name="back" id="back" value="{$cancel_value}" class="submit" onclick="javascript:window.location.href='{$control_url}modules/contact_list/contact_list.php'"/>
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
{literal}
<script language="javascript" type="text/javascript">
$(function() {
$( "#registered_users_from_date" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$(function() {
$( "#registered_users_to_date" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$(function() {
$( "#logged_in_users_from_date" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$(function() {
$( "#logged_in_users_to_date" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$(function() {
$( "#not_logged_in_users_from_date" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$(function() {
$( "#not_logged_in_users_to_date" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$(function(){
$(".user_checkbox").click(function(){
if($("#all_users" ).is(":checked")) {
$("#registered_users").removeAttr("checked");
$("#logged_in_users").removeAttr("checked");
$("#not_logged_in_users").removeAttr("checked");
$("#never_logged_in_users").removeAttr("checked");
$("#package_purchase").removeAttr("checked");
$("#try_demo_packages").removeAttr("checked");
} else if ($("#registered_users" ).is(":checked") || $("#logged_in_users" ).is(":checked") || $("#not_logged_in_users" ).is(":checked") || $("#never_logged_in_users" ).is(":checked") ||
$("#package_purchase" ).is(":checked") || $("#try_demo_packages" ).is(":checked") ) {
$("#all_users").removeAttr("checked"); }
});
});
$(function(){
$('.option_users').hide();
$("#users").click(function() {
if($("#users").is(":checked"))
$('.option_users').show();
else
$('.option_users').hide();
});
});
$("#submit_value").click(function(){
if($('#user_option').find('input[type=checkbox]:checked').length == 0)
{
alert('Please select atleast one checkbox');
return false;
}
if($("#users").is(":checked")) {
if($('.option_users').find('input[type=checkbox]:checked').length == 0) {
//alert(('input[type=checkbox]:checked').length);
alert('Please select atleast one checkbox for user type');
return false;
}
}
return true;
});
</script>
{/literal}
$("#submit_value").click(function(){
if($('#user_option').find('input[type=checkbox]:checked').length == 0)
{
$('.errorMsg').html('<span style="color:red">Please select atleast one checkbox</span>');
return false;
}
if($("#users").is(":checked")) {
if($('.option_users').find('input[type=checkbox]:checked').length == 0) {
//alert(('input[type=checkbox]:checked').length);
$('.errorMsg').text('<span style="color:red">Please select atleast one checkbox for user type</span>');
return false;
}
}
return true;
});
if (error exist) {
$errormsg = "<span style='color: red'>sometext</span>";
$("#id").html($errormsg)
}
or you can also addClass.
//css
.error {
color: red;
}
//javascript
if (error exist) {
$("#id").addClass('error').html("sometext")
}
Give a span tag at the top of the form
<span id="errorMsg"></span>
In Jquery, instead of alert give as
$('#errorMsg').css('color','red');
$('#errorMsg').html('Please select atleast one checkbox');
$("#submit_value").click(function(){
if($('#user_option').find('input[type=checkbox]:checked').length == 0)
{
$("#user").html('Please select atleast one checkbox');
return false;
}
if($("#users").is(":checked")) {
if($('.option_users').find('input[type=checkbox]:checked').length == 0) {
//alert(('input[type=checkbox]:checked').length);
$("#user").html('Please select atleast one checkbox for user type');
return false;
}
}
return true;
});
at the top of or at the checboxes add divs with different id
<div id="user" style='color:red'></div>
$("#submit_value").click(function(){
if($('#user_option').find('input[type=checkbox]:checked').length == 0)
{
$('.errorMsg').css({ 'color': 'red'});
$('.errorMsg').html('Please select atleast one checkbox');
return false;
}
if($("#users").is(":checked")) {
if($('.option_users').find('input[type=checkbox]:checked').length == 0) {
//alert(('input[type=checkbox]:checked').length);
$('.errorMsg').css({ 'color': 'red'});
$('.errorMsg').html('Please select atleast one checkbox for user type');
return false;
}
}
return true;
});
Ok, some things I would do:
1- Don't link to an element id, instead, link the event to the form:
$("#submit_value").click(function() {
$('form.validate').submit(function() {
With this, you'll have to add the class 'validate' to the html form. And by this way any submit button will check the form, even if you use jquery to trigger the form's submit, and you'll be able of reuse jquery code
2- Use classes to add the style. With classes, you can easily define how will be the error element style:
input.error {
background-color:red;
border: 1px solid red;
}
select.error {
border: 1px solid red;
}
And it's easy to append to an element a class than all an style.
3 - Create a reserved space for your messages in the html, with the loaded message, hidden. It'll be easy to you to change the message you want to show, from PHP.
<tr>
<td colspan="3" class="errorMsg">{$error_msg.error_msgs}</td>
</tr>
should contain something like:
<tr>
<td colspan="3" class="errorMsg">
<p id="errorIDelement">Error with input IDelement</p>
<p id="errorUserCheck">Please select atleast one checkbox for user type</p>
</td>
</tr>
Your jquery code, would be something like:
$("form.validate").submit(function(e){
$form = $(this);
e.preventDefault();
//Not selected checkbox:
$errorChecks = $form.find('input[type=checkbox]:checked');
if($errorChecks.length != 0) {
$errorChecks.each( function(){
// This would highlight error
$(this).addClass('error');
// This would show error in your list
$id = $(this).attr('id');
$('#error'+$id ).show();
});
} else if($("#users").is(":checked") && $('.option_users').find('input[type=checkbox]:checked').length == 0) {
$('.errorMsg .errorUserCheck').show();
$("#users").addClass('error');
} else {
// If we arrived here, we have validated all, and can submit
$form.submit();
}
});
It's not checked, and a long answer, if you have any doubt, just post again, ;)