我使用的是PHP和smarty。我对jQuery有点陌生。我在jQuery中编写了一个函数，并在表单提交时调用该函数。目前，我正在警报中显示错误消息。但要求是它应该显示在表单上方，并且有错误的字段应该突出显示。在这两种情况下，字体颜色都应该是红色。为了供您参考，我正在粘贴我的智能模板代码（即表单代码）。
<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;
});
在表单的顶部给出一个span标记
<span id="errorMsg"></span>
在Jquery中，警报不作为发出
$('#errorMsg').css('color','red');
$('#errorMsg').html('Please select atleast one checkbox');
if (error exist) {
$errormsg = "<span style='color: red'>sometext</span>";
$("#id").html($errormsg)
}
或者您也可以addClass。
//css
.error {
color: red;
}
//javascript
if (error exist) {
$("#id").addClass('error').html("sometext")
}
addClass
$("#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;
});
在复选框的顶部或添加具有不同id 的div
<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;
});
好的，我会做一些事情：
1-不要链接到元素id，而是将事件链接到表单：
$("#submit_value").click(function() {
$('form.validate').submit(function() {
这样，你就必须将类"validate"添加到html表单中。通过这种方式，任何提交按钮都会检查表单，即使你使用jquery来触发表单的提交，你也可以重用jquery代码
2-使用类添加样式有了类，你可以很容易地定义错误元素的样式：
input.error {
background-color:red;
border: 1px solid red;
}
select.error {
border: 1px solid red;
}
而且，在元素上附加一个类比附加一个样式更容易。
3-在html中为您的消息创建一个保留空间，并隐藏加载的消息。您可以很容易地从PHP更改要显示的消息。
<tr>
<td colspan="3" class="errorMsg">{$error_msg.error_msgs}</td>
</tr>
应该包含以下内容：
<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>
您的jquery代码可能类似于：
$("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();
}
});
它没有被检查，如果你有任何疑问，只需再次发布一个长答案；）