mgmhicks
asked on
Jquery validation not working.
I have this full html code. I am testing by just trying to validate that the App1Name ID is required and has text. So I want it to show a alert if it does not validate and what control.
So what is wrong with the code that the validate isn't doing that, and 2 how to get it to show the error in alert if I can not move to the next appwizard tab.
thanks in advance
So what is wrong with the code that the validate isn't doing that, and 2 how to get it to show the error in alert if I can not move to the next appwizard tab.
thanks in advance
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Content/bootstrap.css" media="screen" />
<link rel="stylesheet" href="scripts/datepicker/css/datepicker.css" />
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>
<!--<script src="Content/bootstrap-validator-master/js/validator.js"></script>-->
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Scripts/jsMask/jquery.maskedinput.js"></script>
<script type="text/javascript" src="https://jquery-blog-js.googlecode.com/files/SetCase.js"></script>
<script type="text/javascript" src="Scripts/jquery.formatCurrency-1.4.0.min.js"></script>
<script type="text/javascript" src="Scripts/datepicker/js/bootstrap-datepicker.js"></script>
<!--<script type="text/javascript" src="../scripts/datepicker/js/bootstrap-datepicker.js"></script>-->
<style>
.col-xs {
padding: 0 !important;
margin: 0 !important;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.FormatRadioButtonList label {
margin-right: 15px;
margin-left: 3px;
}
</style>
<title>Resident Application</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<img src="Images/EqualHousing-small.png" />
</div>
</div>
<div id="rootwizard">
<ul class="nav nav-tabs" role="tablist">
<li><a href="#step1" role="tab" data-toggle="tab"><span class="badge badge-info">1</span>Applicants </a></li>
<li><a href="#step2" role="tab" data-toggle="tab"><span class="badge badge-info">2</span> Minors </a></li>
<li><a href="#step3" role="tab" data-toggle="tab"><span class="badge badge-info">3</span> Pets</a></li>
<li><a href="#step6" role="tab" data-toggle="tab"><span class="badge badge-info">4</span> Options</a></li>
<li><a href="#step4" role="tab" data-toggle="tab"><span class="badge badge-info">5</span> Criteria</a></li>
<li><a href="#step5" role="tab" data-toggle="tab"><span class="badge badge-info">6</span> Requirements</a></li>
</ul>
<div class="progress">
<div id="progressBar" class="progress-bar progress-bar-striped">
<div class="bar">
<span></span>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<div id="AppWizard">
<h3>Step 1: Applicant Information</h3>
<h4>Include anyone age 18 or older </h4>
<br />
<ul class="nav nav-tabs badge badge-info" role="tablist">
<li class="active"><a href="#App1" role="tab" data-toggle="tab">Applicant 1 </a></li>
<li><a href="#App2" role="tab" data-toggle="tab">Applicant 2 </a></li>
<li><a href="#App3" role="tab" data-toggle="tab" aria-disabled="true">Applicant 3 </a></li>
<li><a href="#App4" role="tab" data-toggle="tab" aria-disabled="true">Applicant 4 </a></li>
</ul>
<div class="tab-content center-block" style="text-align: center;">
<p> </p>
<!--<%-- this starts each panel for each app --%>-->
<div class="form" id="frmApp1">
<div class="tab-pane active" id="App1">
<div class="form-group">
<div class="row" id="App1-1">
<div class="col-xs-2 text-right">
<em>Applicant 1: </em>
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="First Name" id="App1FName" class="form-control pName lClass" data-toggle="tooltip" title="First Name" name="App1FName" required/>
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Last Name" id="App1LName" class="form-control pName lClass" data-toggle="tooltip" title="Last Name" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="MI" id="App1MI" class="form-control pName lClass" data-toggle="tooltip" title="Middle Initial" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" id="App1BDay" class="form-control mskDate dClass" data-toggle="tooltip" title="Birthday" placeholder="Birthday" />
</div>
<div class="col-xs-2 nopadding">
<!--<%--<asp:dropdownlist runat="server" cssclass="form-control ui-selectable">
<asp:listitem text="Gender" value="G"></asp:listitem>
<asp:listitem text="Male" value="M"></asp:listitem>
<asp:listitem text="Female" value="F"></asp:listitem>
</asp:dropdownlist>--%>-->
<input type="text" id="App1Social" class="form-control mskSocial dClass" data-toggle="tooltip" title="Social Security" placeholder="Social Security" />
</div>
<div class="col-xs-1 nopadding">
</div>
</div>
<div class="row" id="App1-2">
<div class="col-xs-2">
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Home Phone" id="App1HPhone" class="form-control mskPhone dClass" required="required" data-toggle="tooltip" title="Home Phone" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Cell Phone" id="App1CPhone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Cell Phone" />
</div>
<div class="col-xs-3 nopadding">
<input type="email" placeholder="Email Address" id="App1Email" class="form-control" data-toggle="tooltip" title="Email Address" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" required="required" />
</div>
<div class="col-xs-2 nopadding">
<!--<asp:DropDownList runat="server" ID="App1Contact" CssClass="form-control">
<asp:listitem text="Contact Method" value="0"></asp:listitem>
<asp:listitem text="Home Phone" value="HPhone"></asp:listitem>
<asp:listitem text="Cell Phone" value="CPhone"></asp:listitem>
<asp:listitem text="Email" value="Email"></asp:listitem>
</asp:DropDownList>-->
</div>
<div class="col-xs-1 nopadding">
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="row" id="App1-3">
<div class="col-xs-2 text-right">
<em>Current Address:</em>
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Street Address" id="App1CStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="City" id="App1CCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="St" id="App1CState" class="form-control" required="required" data-toggle="tooltip" title="State" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Zip" id="App1CZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Yrs" id="App1CLength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Rent" id="App1CRent" class="form-control monInc mClass" required="required" data-toggle="tooltip" title="Rent" />
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="form-group">
<div class="row" id="App1-4">
<div class="col-xs-2 text-right">
<em>Previous Address:</em>
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Street Address" id="App1PStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="City" id="App1PCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="St" id="App1PState" class="form-control" required="required" data-toggle="tooltip" title="State" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Zip" id="App1PZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Yrs" id="App1PLength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Rent" id="App1PRent" class="form-control monInc mClass " required="required" data-toggle="tooltip" title="Rent" />
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="row" id="App1-5">
<div class="col-xs-2 text-right">
<em>Employment:</em>
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Employer" id="App1Employer" class="form-control " required="required" data-toggle="tooltip" title="Employer" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Position" id="App1Position" class="form-control " data-toggle="tooltip" title="Position" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Supervisor's Name" id="App1Supervisor" class="form-control " data-toggle="tooltip" title="Supervisor's Name" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Work Phone" id="App1WPHone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Work Phone" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Monthly Income" id="App1EmpIncome" class="form-control monInc mClass" data-toggle="tooltip" title="Monthly Income" />
</div>
</div>
<div class="row" id="App1-6">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Street Address" id="App1EmpStreet" class="form-control " data-toggle="tooltip" title="Street Address" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="City" id="App1EmpCity" class="form-control " data-toggle="tooltip" title="City" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="St" id="App1EmpState" class="form-control " data-toggle="tooltip" title="State" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Zip" id="App1EmpZip" class="form-control dClass " data-toggle="tooltip" title="Zip Code" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Start Date" id="App1EmpStart" class="form-control mskDate dClass" data-toggle="tooltip" title="Start" />
</div>
<div class="col-xs-1">
thru
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="End Date" id="App1EmpEnd" class="form-control mskDate dClass" data-toggle="tooltip" title="End Date" />
</div>
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="row" id="App1-7">
<div class="col-xs-2 text-right">
<em>Vehicle Information: </em>
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Year" id="App1CarYear" class="form-control " data-toggle="tooltip" title="Year" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Make" id="App1CarMake" class="form-control myUcase " required="required" data-toggle="tooltip" title="Make" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Model" id="App1CarModel" class="form-control myUcase" data-toggle="tooltip" title="Model" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Color" id="App1CarColor" class="form-control myUcase " data-toggle="tooltip" title="Color" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="License Plate" id="App1CarPlate" class="form-control myUcase" required="required" data-toggle="tooltip" title="License Plate" />
</div>
</div>
<br />
</div>
<div class="form-group">
<div class="row" id="App1-8">
<div class="col-xs-2 text-right">
<em>Emergency Contact: </em>
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Name" id="App1ContactName" class="form-control pName lClass" required="required" data-toggle="tooltip" title="Name" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Relationship" id="App1ContactRelationship" class="form-control " required="required" data-toggle="tooltip" title="Relationship" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Phone" id="App1ContactPhone" class="form-control mskPhone dClass " required="required" data-toggle="tooltip" title="Phone" />
</div>
<div class="col-xs-3 nopadding">
</div>
</div>
<div class="row" id="App1-9">
<div class="col-xs-2 ">
</div>
<div class="col-xs-5 nopadding">
<input type="text" placeholder="Full Address" id="App1ContactAddr" class="form-control " data-toggle="tooltip" title="Full Address" />
</div>
<div class="col-xs-3 nopadding">
<input type="email" placeholder="Email Address" id="App1ContactEmail" class="form-control " required="required" data-toggle="tooltip" title="Email Address" />
</div>
<div class="col-xs-2 nopadding text-left">
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-10 text-left">
<input type="checkbox" id="chkApp1ContactEmployer" data-toggle="tooltip" title="Authorize to talk to emergency contact about your account." />
<b> <em> If you do NOT want us to discuss your account with this person, please check the box.</em></b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix">
</div>
<p> </p>
</div>
<ul class="pager wizard">
<!-- These show as disabled on first tab. Add style="display:none;" to make the First button disappear when first tab. -->
<li class="first previous"><a href="#" accesskey="f">First</a></li>
<li class="previous"><a href="#" accesskey="p">Previous</a></li>
<li class="last" style="display: none;"><a href="#">Done</a></li>
<li class="next"><a href="#" accesskey="n">Next</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onNext: function (tab, navigation, index) {
alert('next');
$('#App1').validator({
});
},
onTabShow: function (tab, navigation, index) {
// Dynamically change percentage completion on progress bar
var tabCount = navigation.find('li').length;
var current = index + 1;
var percentDone = (current / tabCount) * 100;
$('#rootwizard').find('#progressBar').css({ width: percentDone + '%' });
// Optional: Show Done button when on last tab;
// It is invisible by default.
$('#rootwizard').find('.last').toggle(current >= tabCount);
// Optional: Hide Next button if on last tab;
// otherwise it shows but is disabled
$('#rootwizard').find('.next').toggle(current < tabCount);
},
onFinish: function (tab, navigation, index) {
},
onPrevious: function (tab, navigation, index) {
alert('Previous')
}
});
$('#rootwizard .finish').click(function () {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
$('#AppWizard a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var myCurrentTabID = e.relatedTarget.hash.replace('#App', '')
var myNextTabID = e.target.hash.replace('#App', '')
var mytabName = e.relatedTarget.hash
var myform = mytabName.replace('#', '')
myform = '#frm' + myform
var myfname = mytabName + 'FName'
var mylname = mytabName + 'LName'
if (myCurrentTabID < myNextTabID) {
if ($(!myform).validate()) {
}
else {
return false;
}
//if (myValid(mytabName)) {
//} else {
// $('.nav-tabs li a').removeClass('hover'); // remove active class from tabs
// //$(this).addClass('active'); // add active class to clicked tab
// $(mytabName.li).removeClass('hover');
// //myCurrentTabID.addClass('active');
// return false;
//}
};
});
//function myValid(mytarget) {
// var myfname = mytarget + 'FName'
// var mylname = mytarget + 'LName'
// if (!$(myfname).val()) {
// alert('you must enter a first name');
// return false;
// } else {
// if (!$(mylname).val()) {
// alert('You must enter a last name');
// return false;
// };
// };
// if (!$(myhphone).val()) {
// } else {
// var myTextBox = myhphone.val();
// }
// return true;
//};
});
</script>
</body>
</html>
Sorry, but in you previous question you had a form in your html page. Now the form element has disappeared and you're using div with class 'form'. Unless you have read something which specifically allows to use this technique with jquery validator, I think this just can't work. As far as I know, jquery validator works if and only inf you give it a form to validate: just enclose your inputs within one (or more) form to get it work. As I suggested in the other thread, I would use a form for each wizard tab.
Cheers
Cheers
ASKER
here is the new code which is in a form tag and still now working for me. Does it work for you?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Content/bootstrap.css" media="screen" />
<link rel="stylesheet" href="scripts/datepicker/css/datepicker.css" />
<script src="Content/jQuery-Validator//lib/jquery-1.9.1.js"></script>
<script src="Content/jQuery-Validator/dist/jquery.validate.js"></script>
<script src="Content/jQuery-Validator/dist/additional-methods.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>
<!--<script src="Content/bootstrap-validator-master/js/validator.js"></script>-->
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Scripts/jsMask/jquery.maskedinput.js"></script>
<script type="text/javascript" src="https://jquery-blog-js.googlecode.com/files/SetCase.js"></script>
<script type="text/javascript" src="Scripts/jquery.formatCurrency-1.4.0.min.js"></script>
<script type="text/javascript" src="Scripts/datepicker/js/bootstrap-datepicker.js"></script>
<!--<script type="text/javascript" src="../scripts/datepicker/js/bootstrap-datepicker.js"></script>-->
<style>
.col-xs {
padding: 0 !important;
margin: 0 !important;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.FormatRadioButtonList label {
margin-right: 15px;
margin-left: 3px;
}
</style>
<title>Resident Application</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<img src="Images/EqualHousing-small.png" />
</div>
</div>
<div id="rootwizard">
<ul class="nav nav-tabs" role="tablist">
<li><a href="#step1" role="tab" data-toggle="tab"><span class="badge badge-info">1</span>Applicants </a></li>
<li><a href="#step2" role="tab" data-toggle="tab"><span class="badge badge-info">2</span> Minors </a></li>
<li><a href="#step3" role="tab" data-toggle="tab"><span class="badge badge-info">3</span> Pets</a></li>
<li><a href="#step6" role="tab" data-toggle="tab"><span class="badge badge-info">4</span> Options</a></li>
<li><a href="#step4" role="tab" data-toggle="tab"><span class="badge badge-info">5</span> Criteria</a></li>
<li><a href="#step5" role="tab" data-toggle="tab"><span class="badge badge-info">6</span> Requirements</a></li>
</ul>
<div class="progress">
<div id="progressBar" class="progress-bar progress-bar-striped">
<div class="bar">
<span></span>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<div id="AppWizard">
<h3>Step 1: Applicant Information</h3>
<h4>Include anyone age 18 or older </h4>
<br />
<ul class="nav nav-tabs badge badge-info" role="tablist">
<li class="active"><a href="#App1" role="tab" data-toggle="tab">Applicant 1 </a></li>
<li><a href="#App2" role="tab" data-toggle="tab">Applicant 2 </a></li>
<li><a href="#App3" role="tab" data-toggle="tab" aria-disabled="true">Applicant 3 </a></li>
<li><a href="#App4" role="tab" data-toggle="tab" aria-disabled="true">Applicant 4 </a></li>
</ul>
<div class="tab-content center-block" style="text-align: center;">
<p> </p>
<!--<%-- this starts each panel for each app --%>-->
<form id="frmApp1" name="frmApp1" method="post" class="form-horizontal" action="">
<!--<div class="form" id="frmApp1">-->
<div class="tab-pane active" id="App1">
<div class="form-group">
<div class="row" id="App1-1">
<div class="col-xs-2 text-right">
<em>Applicant 1: </em>
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="First Name" id="App1FName" class="form-control pName lClass name-group" data-rule-minlength="2" data-toggle="tooltip" title="First Name" name="App1FName" required />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Last Name" id="App1LName" class="form-control pName lClass" data-toggle="tooltip" title="Last Name" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="MI" id="App1MI" class="form-control pName lClass" data-toggle="tooltip" title="Middle Initial" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" id="App1BDay" class="form-control mskDate dClass" data-toggle="tooltip" title="Birthday" placeholder="Birthday" />
</div>
<div class="col-xs-2 nopadding">
<!--<%--<asp:dropdownlist runat="server" cssclass="form-control ui-selectable">
<asp:listitem text="Gender" value="G"></asp:listitem>
<asp:listitem text="Male" value="M"></asp:listitem>
<asp:listitem text="Female" value="F"></asp:listitem>
</asp:dropdownlist>--%>-->
<input type="text" id="App1Social" class="form-control mskSocial dClass" data-toggle="tooltip" title="Social Security" placeholder="Social Security" />
</div>
<div class="col-xs-1 nopadding">
</div>
</div>
<div class="row" id="App1-2">
<div class="col-xs-2">
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Home Phone" id="App1HPhone" class="form-control mskPhone dClass" required="required" data-toggle="tooltip" title="Home Phone" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Cell Phone" id="App1CPhone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Cell Phone" />
</div>
<div class="col-xs-3 nopadding">
<input type="email" placeholder="Email Address" id="App1Email" class="form-control" data-toggle="tooltip" title="Email Address" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" required="required" />
</div>
<div class="col-xs-2 nopadding">
<!--<asp:DropDownList runat="server" ID="App1Contact" CssClass="form-control">
<asp:listitem text="Contact Method" value="0"></asp:listitem>
<asp:listitem text="Home Phone" value="HPhone"></asp:listitem>
<asp:listitem text="Cell Phone" value="CPhone"></asp:listitem>
<asp:listitem text="Email" value="Email"></asp:listitem>
</asp:DropDownList>-->
</div>
<div class="col-xs-1 nopadding">
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="row" id="App1-3">
<div class="col-xs-2 text-right">
<em>Current Address:</em>
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Street Address" id="App1CStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="City" id="App1CCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="St" id="App1CState" class="form-control" required="required" data-toggle="tooltip" title="State" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Zip" id="App1CZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Yrs" id="App1CLength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Rent" id="App1CRent" class="form-control monInc mClass" required="required" data-toggle="tooltip" title="Rent" />
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="form-group">
<div class="row" id="App1-4">
<div class="col-xs-2 text-right">
<em>Previous Address:</em>
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Street Address" id="App1PStreet" class="form-control " required="required" data-toggle="tooltip" title="Street Address" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="City" id="App1PCity" class="form-control " required="required" data-toggle="tooltip" title="City" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="St" id="App1PState" class="form-control" required="required" data-toggle="tooltip" title="State" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Zip" id="App1PZip" class="form-control dClass" required="required" data-toggle="tooltip" title="Zip" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Yrs" id="App1PLength" class="form-control dClass" required="required" data-toggle="tooltip" title="Years" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Rent" id="App1PRent" class="form-control monInc mClass " required="required" data-toggle="tooltip" title="Rent" />
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="row" id="App1-5">
<div class="col-xs-2 text-right">
<em>Employment:</em>
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Employer" id="App1Employer" class="form-control " required="required" data-toggle="tooltip" title="Employer" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Position" id="App1Position" class="form-control " data-toggle="tooltip" title="Position" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Supervisor's Name" id="App1Supervisor" class="form-control " data-toggle="tooltip" title="Supervisor's Name" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Work Phone" id="App1WPHone" class="form-control mskPhone dClass" data-toggle="tooltip" title="Work Phone" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Monthly Income" id="App1EmpIncome" class="form-control monInc mClass" data-toggle="tooltip" title="Monthly Income" />
</div>
</div>
<div class="row" id="App1-6">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Street Address" id="App1EmpStreet" class="form-control " data-toggle="tooltip" title="Street Address" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="City" id="App1EmpCity" class="form-control " data-toggle="tooltip" title="City" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="St" id="App1EmpState" class="form-control " data-toggle="tooltip" title="State" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Zip" id="App1EmpZip" class="form-control dClass " data-toggle="tooltip" title="Zip Code" />
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Start Date" id="App1EmpStart" class="form-control mskDate dClass" data-toggle="tooltip" title="Start" />
</div>
<div class="col-xs-1">
thru
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="End Date" id="App1EmpEnd" class="form-control mskDate dClass" data-toggle="tooltip" title="End Date" />
</div>
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="row" id="App1-7">
<div class="col-xs-2 text-right">
<em>Vehicle Information: </em>
</div>
<div class="col-xs-1 nopadding">
<input type="text" placeholder="Year" id="App1CarYear" class="form-control " data-toggle="tooltip" title="Year" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Make" id="App1CarMake" class="form-control myUcase " required="required" data-toggle="tooltip" title="Make" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Model" id="App1CarModel" class="form-control myUcase" data-toggle="tooltip" title="Model" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Color" id="App1CarColor" class="form-control myUcase " data-toggle="tooltip" title="Color" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="License Plate" id="App1CarPlate" class="form-control myUcase" required="required" data-toggle="tooltip" title="License Plate" />
</div>
</div>
<br />
</div>
<div class="form-group">
<div class="row" id="App1-8">
<div class="col-xs-2 text-right">
<em>Emergency Contact: </em>
</div>
<div class="col-xs-3 nopadding">
<input type="text" placeholder="Name" id="App1ContactName" class="form-control pName lClass" required="required" data-toggle="tooltip" title="Name" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Relationship" id="App1ContactRelationship" class="form-control " required="required" data-toggle="tooltip" title="Relationship" />
</div>
<div class="col-xs-2 nopadding">
<input type="text" placeholder="Phone" id="App1ContactPhone" class="form-control mskPhone dClass " required="required" data-toggle="tooltip" title="Phone" />
</div>
<div class="col-xs-3 nopadding">
</div>
</div>
<div class="row" id="App1-9">
<div class="col-xs-2 ">
</div>
<div class="col-xs-5 nopadding">
<input type="text" placeholder="Full Address" id="App1ContactAddr" class="form-control " data-toggle="tooltip" title="Full Address" />
</div>
<div class="col-xs-3 nopadding">
<input type="email" placeholder="Email Address" id="App1ContactEmail" class="form-control " required="required" data-toggle="tooltip" title="Email Address" />
</div>
<div class="col-xs-2 nopadding text-left">
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-10 text-left">
<input type="checkbox" id="chkApp1ContactEmployer" data-toggle="tooltip" title="Authorize to talk to emergency contact about your account." />
<b> <em> If you do NOT want us to discuss your account with this person, please check the box.</em></b>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="clearfix">
</div>
<p> </p>
</div>
<ul class="pager wizard">
<!-- These show as disabled on first tab. Add style="display:none;" to make the First button disappear when first tab. -->
<li class="first previous"><a href="#" accesskey="f">First</a></li>
<li class="previous"><a href="#" accesskey="p">Previous</a></li>
<li class="last" style="display: none;"><a href="#">Done</a></li>
<li class="next"><a href="#" accesskey="n">Next</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#rootwizard').bootstrapWizard({
onNext: function (tab, navigation, index) {
alert('next');
//$('#App1').validator({
//});
},
onTabShow: function (tab, navigation, index) {
// Dynamically change percentage completion on progress bar
var tabCount = navigation.find('li').length;
var current = index + 1;
var percentDone = (current / tabCount) * 100;
$('#rootwizard').find('#progressBar').css({ width: percentDone + '%' });
// Optional: Show Done button when on last tab;
// It is invisible by default.
$('#rootwizard').find('.last').toggle(current >= tabCount);
// Optional: Hide Next button if on last tab;
// otherwise it shows but is disabled
$('#rootwizard').find('.next').toggle(current < tabCount);
},
onFinish: function (tab, navigation, index) {
},
onPrevious: function (tab, navigation, index) {
alert('Previous')
}
});
$('#rootwizard .finish').click(function () {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
$('#AppWizard a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var myCurrentTabID = e.relatedTarget.hash.replace('#App', '')
var myNextTabID = e.target.hash.replace('#App', '')
var mytabName = e.relatedTarget.hash
var myform = mytabName.replace('#', '')
myform = '#frm' + myform
var myfname = mytabName + 'FName'
var mylname = mytabName + 'LName'
if (myCurrentTabID < myNextTabID) {
//var myval = $('#frmApp1').validate();
//if (myval.valid)
//{
// alert('valid')
//}
//else { alert('not valid') };
$('#frmApp1').validate({
invalidHandler: function(event, validator){
var errors = validator.numerOfInvalids();
if (errors) {
var message = errors
alert(errors)
}
},
debug: true,
rules: {
App1FName: {
required: true,
minlength: 2
}
},
messages: {
App1FName: {
required: "We need a name",
minlength: jQuery.validator.format("At lease {0} char")
}
}
});
//if (myValid(mytabName)) {
//} else {
// $('.nav-tabs li a').removeClass('hover'); // remove active class from tabs
// //$(this).addClass('active'); // add active class to clicked tab
// $(mytabName.li).removeClass('hover');
// //myCurrentTabID.addClass('active');
// return false;
//}
};
});
//function myValid(mytarget) {
// var myfname = mytarget + 'FName'
// var mylname = mytarget + 'LName'
// if (!$(myfname).val()) {
// alert('you must enter a first name');
// return false;
// } else {
// if (!$(mylname).val()) {
// alert('You must enter a last name');
// return false;
// };
// };
// if (!$(myhphone).val()) {
// } else {
// var myTextBox = myhphone.val();
// }
// return true;
//};
});
</script>
</body>
</html>
I don't have all needed files, so I can't test as I wish, but if I click next button without type first name the input is rounded with red border as expected. If you can provide all files you're using I can do some more accurate test :-)
ASKER
Can you tell me what your js version is and the only links and scripts you loaded. maybe one of my other scripts are getting involved. You can see the scripts at the top that I am loading.
thank you
thank you
I just used the snipped you posted above: I have bootstrap, jquery-1.11.3, jquery.validate but all styles and other (datepicker and so on) are missing
ASKER
I'm sorry Marco but this is still an issue. I moved to bootstrapvalidator to try something different. Still not working. When in google developer if it I put a stop at the $('frmApp1').bootstrapvali
I am at my wits end as to why this doesn't work as expected. Please let me know what else you need.
thanks
Here is what I have now
I am at my wits end as to why this doesn't work as expected. Please let me know what else you need.
thanks
Here is what I have now
$('#frmApp1').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
App1FName: {
message: 'The username is not valid', validators: {
notEmpty: { message: 'The username is required and can\'t be empty' },
}
}
},
callback: {
callback: function () {
alert('test')
}
}
});
To test I need everything is needed to make app working. As I said above I have bootstrap, jquery-1.11.3, jquery.validate but they are not enough, in fact the wizard doesn't appear in the page. If you can provide an archive with needed files I can reproduce the page on my server and do some test, otherwise I'm sorry but I can't help you :-(
ASKER
ok, I have attached the scripts that I have active on the page. Thank you again
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Content/bootstrap.css" media="screen" />
<!--<link rel="stylesheet" href="Themes/jquery-ui-1.11.4.Overcast/jquery-ui.theme.css" />-->
<!--<link rel="stylesheet" href="scripts/datepicker/css/datepicker.css" />-->
<link rel="stylesheet" href="Scripts/bootstrapvalidator/src/css/bootstrapValidator.css" />
<script src="Scripts/jquery-1.11.2.js"></script>
<!--<script src="Scripts/jValidate/jquery.validate.js"></script>-->
<script src="Scripts/bootstrap.js"></script>
<!--<script src="Scripts/bootstrapvalidator/src/js/bootstrapValidator.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Scripts/jsMask/jquery.maskedinput.js"></script>
<script type="text/javascript" src="https://jquery-blog-js.googlecode.com/files/SetCase.js"></script>
<script type="text/javascript" src="Scripts/jquery.formatCurrency-1.4.0.min.js"></script>
<script type="text/javascript" src="Scripts/datepicker/js/bootstrap-datepicker.js"></script>
ASKER
Marco I'll go either way jquery.validate() or boostrapvalidate. Whatever I can get to work.
thanks
thanks
Sorry, there is a misunderstanding. I asked for a zip file containing needed files not just file names: I really can get around to download all required code :-)
ASKER
I don't expect that it was a rar I will make it a zip
ASKER
this is what I get, can I email it to you. just css and js files.
The extension of one or more files in the archive is not in the list of allowed extensions: bootstrapvalidator/.gitign
The extension of one or more files in the archive is not in the list of allowed extensions: bootstrapvalidator/.gitign
ASKER
thank you again
Scripts.zip
Scripts.zip
In script tag at the bottom of the page place this (I purged unneeded code):
Cheers
$(document).ready(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#rootwizard').bootstrapWizard({
onNext: function (tab, navigation, index) {
alert('next');
},
onTabShow: function (tab, navigation, index) {
// Dynamically change percentage completion on progress bar
var tabCount = navigation.find('li').length;
var current = index + 1;
var percentDone = ( current / tabCount ) * 100;
$('#rootwizard').find('#progressBar').css({width: percentDone + '%'});
// Optional: Show Done button when on last tab;
// It is invisible by default.
$('#rootwizard').find('.last').toggle(current >= tabCount);
// Optional: Hide Next button if on last tab;
// otherwise it shows but is disabled
$('#rootwizard').find('.next').toggle(current < tabCount);
},
onFinish: function (tab, navigation, index) {
},
onPrevious: function (tab, navigation, index) {
alert('Previous')
}
});
$('#rootwizard .finish').click(function () {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
$('#AppWizard a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var myCurrentTabID = e.relatedTarget.hash.replace('#App', '')
var myNextTabID = e.target.hash.replace('#App', '')
var mytabName = e.relatedTarget.hash
var myform = mytabName.replace('#', '')
myform = '#frm' + myform
var myfname = mytabName + 'FName'
var mylname = mytabName + 'LName'
if ( myCurrentTabID < myNextTabID ) {
$('#frmApp1').validate({
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
if ( errors ) {
var message = errors;
alert(errors);
}
},
debug: true,
rules: {
App1FName: {
required: true,
minlength: 2
}
},
messages: {
App1FName: {
required: "We need a name",
minlength: jQuery.validator.format("At lease {0} char")
}
}
});
if ($('#frmApp1').valid()){
alert('Form is valid');
}else{
alert('Fill the form, guy!');
}
}
});
});Cheers
ASKER
You are the man! So are the rules:{} that are setup being used? and do I have to do that for all fields or can I just use required on the input?
The only thing is its, still going to the 2nd app2 tab instead of stopping and going back. Also what determines the how the messages come up. Looks like it hoses up page to show what fields are bad. I would like to just make the border red or something.
The only thing is its, still going to the 2nd app2 tab instead of stopping and going back. Also what determines the how the messages come up. Looks like it hoses up page to show what fields are bad. I would like to just make the border red or something.
In fact. Just add something like this after messages:
And yes, you have to write all rules within validate() method.
highlight: function (element) {
jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},And yes, you have to write all rules within validate() method.
ASKER
Thank you again.
ASKER
here is what I have now, not getting the highlight to work
$(document).ready(function () {
localStorage.clear();
$('[data-toggle="tooltip"]').tooltip();
$('.dropdown-toggle').dropdown();
$('#datepicker').datepicker();
$('.mskDate').mask('99/99/9999');
$('.mskPhone').mask('(999)999-9999');
$('.mskSocial').mask('999-99-9999');
$('.pName').Setcase({ caseValue: 'title' });
$('.myUcase').Setcase({ caseValue: 'upper' });
$('.monInc').blur(function (e) {
var myName = '#' + e.target.id
$(myName).formatCurrency();
});
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#rootwizard').bootstrapWizard({
onTabClick: function () {
return false
},
onNext: function (tab, navigation, index) {
alert('next');
},
onTabShow: function (tab, navigation, index) {
// Dynamically change percentage completion on progress bar
var tabCount = navigation.find('li').length;
var current = index + 1;
var percentDone = (current / tabCount) * 100;
$('#rootwizard').find('#progressBar').css({ width: percentDone + '%' });
// Optional: Show Done button when on last tab;
// It is invisible by default.
$('#rootwizard').find('.last').toggle(current >= tabCount);
// Optional: Hide Next button if on last tab;
// otherwise it shows but is disabled
$('#rootwizard').find('.next').toggle(current < tabCount);
},
onFinish: function (tab, navigation, index) {
},
onPrevious: function (tab, navigation, index) {
alert('Previous')
}
});
$('.last').click(function () {
// Initialize the object, before adding data to it.
// { } is declarative shorthand for new Object()
$.ajax({
url: 'AppHandler.ashx',
type: 'POST',
data: JSON.stringify($('form').serializeObject()),
success: function (data) {
console.log(data);
localStorage.clear();
alert(data);
},
error: function (errorText) {
alert("Wwoops something went wrong !");
}
})
});
$('#rootwizard .finish').click(function () {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
$('#AppWizard a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var myCurrentTabID = e.relatedTarget.hash.replace('#App', '')
var myNextTabID = e.target.hash.replace('#App', '')
var mytabName = e.relatedTarget.hash
var myform = mytabName.replace('#', '')
myform = '#frm' + myform
var myfname = mytabName + 'FName'
var mylname = mytabName + 'LName'
if (myCurrentTabID < myNextTabID) {
$('#frmApp1').validate({
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors;
alert(errors);
}
},
messages: {
highlight: function (element) {
jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},
}
});
if ($('#frmApp1').valid()) {
alert('Form is valid');
} else {
alert('Fill the form, guy!');
}
}
});
});
In the code you posted there is not the code to highlight...
ASKER
the validation was working simply by using options with in the <input> so I removed the fields list. Everything still works and it seems to give a default message, except for email where you added a different message.
I'm a bit confused: don't hink to have added no message to email nor to any other field...
Anyway, what is now the state of this question? Is it solved or do you still need some help?
Anyway, what is now the state of this question? Is it solved or do you still need some help?
ASKER
Here is the jquery as it stands now. Fields to validate and the message is still but under the field. So its responding the same way, I need to turn box red and or better yet just give the field error in a message box.
$(document).ready(function () {
localStorage.clear();
$('[data-toggle="tooltip"]').tooltip();
$('.dropdown-toggle').dropdown();
$('#datepicker').datepicker();
$('.mskDate').mask('99/99/9999');
$('.mskPhone').mask('(999)999-9999');
$('.mskSocial').mask('999-99-9999');
$('.pName').Setcase({ caseValue: 'title' });
$('.myUcase').Setcase({ caseValue: 'upper' });
$('.monInc').blur(function (e) {
var myName = '#' + e.target.id
$(myName).formatCurrency();
});
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#rootwizard').bootstrapWizard({
onTabClick: function () {
return false
},
onNext: function (tab, navigation, index) {
alert('next');
},
onTabShow: function (tab, navigation, index) {
// Dynamically change percentage completion on progress bar
var tabCount = navigation.find('li').length;
var current = index + 1;
var percentDone = (current / tabCount) * 100;
$('#rootwizard').find('#progressBar').css({ width: percentDone + '%' });
// Optional: Show Done button when on last tab;
// It is invisible by default.
$('#rootwizard').find('.last').toggle(current >= tabCount);
// Optional: Hide Next button if on last tab;
// otherwise it shows but is disabled
$('#rootwizard').find('.next').toggle(current < tabCount);
},
onFinish: function (tab, navigation, index) {
},
onPrevious: function (tab, navigation, index) {
alert('Previous')
}
});
$('.last').click(function () {
// Initialize the object, before adding data to it.
// { } is declarative shorthand for new Object()
$.ajax({
url: 'AppHandler.ashx',
type: 'POST',
data: JSON.stringify($('form').serializeObject()),
success: function (data) {
console.log(data);
localStorage.clear();
alert(data);
},
error: function (errorText) {
alert("Wwoops something went wrong !");
}
})
});
$('#rootwizard .finish').click(function () {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
$('#AppWizard a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var myCurrentTabID = e.relatedTarget.hash.replace('#App', '')
var myNextTabID = e.target.hash.replace('#App', '')
var mytabName = e.relatedTarget.hash
var myform = mytabName.replace('#', '')
myform = '#frm' + myform
var myfname = mytabName + 'FName'
var mylname = mytabName + 'LName'
if (myCurrentTabID < myNextTabID) {
$('#frmApp1').validate({
invalidHandler: function (event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors;
alert(errors);
}
}
});
if ($('#frmApp1').valid()) {
alert('Form is valid');
} else {
alert('Fill the form, guy!');
}
}
})
});I need to turn box red and or better yet just give the field error in a message box.Do you want avoid the red box and show an message box? For the latter, I have shown how to show an alert: use some plugin or bootstrap dialog instead of the alert and you'll get what you want.
To turn off the red box, that is the default behavior of jquery validator so you have to overwrite it: add highlight/unhighlight rules I shown above and make has-error class have a border transparent. This should work fine. Otherwise use developer tools of your browser to see how the style of the red box is set and overwrite those rules with your class.
ASKER
Thank you again for all your help. I don't get the red, here is a picture of what I get when validation triggers. I would like to just see the red box and a message box. Not the words below the fields.
validation-Picture.png
validation-Picture.png
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi mgmhicks.
No news about this validator: in my tests it worked... Do you still need some help?
No news about this validator: in my tests it worked... Do you still need some help?
ASKER
Thank you so much, look for me may have another question tonight
Happy to help you. Post here the link to your next question if you want, so I'll be notified about it :-)
Thanks for points.
Thanks for points.
ASKER