I'm pretty new to Semantic UI and I'm a little rusty on my Javascript so please bear with me. I literally just copy pasted the code from the Semantic UI example on their website to see how their form validation works and for some reason it's not working with me. Could there be something I'm missing?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
<link rel="stylesheet" type="text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/form.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/components/form.js"> </script>
</head>
<body>
<script>
$('.ui.form')
.form({
fields: {
name: {
identifier: 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least two skills'
}
]
},
gender: {
identifier: 'gender',
rules: [
{
type : 'empty',
prompt : 'Please select a gender'
}
]
},
username: {
identifier: 'username',
rules: [
{
type : 'empty',
prompt : 'Please enter a username'
}
]
},
password: {
identifier: 'password',
rules: [
{
type : 'empty',
prompt : 'Please enter a password'
},
{
type : 'minLength[6]',
prompt : 'Your password must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type : 'checked',
prompt : 'You must agree to the terms and conditions'
}
]
}
}
})
;
</script>
<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="field">
<label>Skills</label>
<select name="skills" multiple="" class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui error message"></div>
</form>
</body>
</html>
$(document).ready(function(){
// and here your code
});
as semantic needs jQuery to work so you have to call the semantic UI functions in jQuery.
I was wondering about the answer of Ashish sah. So I created a Code Pen for your problem:
CodePen
This shows that the script must not be in $(document).ready(..
Strange is also that the code from the question works.
Only difference I see: Code Pen adds the Script dependency add the end of the body - not the head.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
Everything works fine in this JSFiddle
However, when I am trying to use the same code inside my index.html and hit Request Data button, it's not working. The following is the code :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
patientSets: {
validators: {
notEmpty: {
message: 'Please select a patient set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
</script>
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control" >
<option value=" " >Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
</div>
</div>
<button class="btn btn-success" id="conceptsButton">Request Data</button>
</form>
</div>
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
</body>
</html>
The following is the screenshot of the above index.html page which is inside the public folder of XAMPP's htdocs.
And developer's console shows no errors as shown below;
Your code has some broken links and you didn't initialize your validation function on document 'ready', also you shouldn't initialize your validator before the validateForm object loads. I've fixed these below:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <!-- fixed broken link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- fixed broken link -->
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your patient sets:</label>
<select name="patientSets" class="form-control" >
<option value=" " >Please select patient set</option>
<option>PS1</option>
<option>PS2</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Description of research project:</label>
<textarea class="form-control" name="descriptionOfResearchProject" placeholder="Enter your description here...."></textarea>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Title of your research project:</label>
<input name="titleOfResearchProject" placeholder="Enter your title here...." class="form-control" type="text">
</div>
<div class="form-group">
<label class="control-label">Intended use:</label>
<select name="intendedUse" class="form-control" >
<option value=" " >Please select one</option>
<option>test1</option>
<option>test2</option>
</select>
</div>
</div>
</div>
<button class="btn btn-success" id="conceptsButton">Request Data</button>
</form>
</div>
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<script type="text/javascript">
//Initialize function when document 'is ready'
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
patientSets: {
validators: {
notEmpty: {
message: 'Please select a patient set'
}
}
},
titleOfResearchProject: {
validators: {
stringLength: {
min: 5,
message: 'Please Enter the title with minimum 5 letters length'
},
notEmpty: {
message: 'Please Enter title of your project'
}
}
},
descriptionOfResearchProject: {
validators: {
stringLength: {
min: 15,
max: 100,
message: 'Please enter at least 15 characters and no more than 100'
},
notEmpty: {
message: 'Please Enter Description'
}
}
},
intendedUse: {
validators: {
notEmpty: {
message: 'Please select one option'
}
}
},
}
});
//END FORM Validations
});
//END FORM Validations
</script>
</body>
</html>
Thats because you try to initialize validator before validateForm object load. Move your script to front of </body>
I am always getting an error in my console when using formvalidation.io.
I have no idea what the cause of this error is. I also still get spam on some websites, even when I am using the backendVerificationURL. I am using Invisible ReCaptcha (https://formvalidation.io/guide/plugins/recaptcha/)
My HTML form:
<form id="contact" method="post" action="/vendor/contact-form.php">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="bmd-label-floating">Naam</label>
<input type="text" name="naam" id="naam" class="form-control">
<span class="material-input"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="bmd-label-floating">Telefoonnummer</label>
<input type="text" name="telefoon" id="telefoon" class="form-control">
<span class="material-input"></span>
</div>
</div>
</div>
<div class="form-group label-floating is-empty">
<label class="bmd-label-floating">Mailadres</label>
<input type="email" name="email" id="email" class="form-control">
<span class="material-input"></span>
</div>
<div class="form-group label-floating is-empty">
<label for="bericht" class="bmd-label-floating">Uw bericht</label>
<textarea name="bericht" class="form-control" id="bericht" rows="6"></textarea>
<span class="material-input"></span>
</div>
</div>
<div class="card-footer justify-content-between">
<div class="form-check">
<!-- De captcha container -->
<div id="captchaContainer"></div>
</div>
<button type="submit" class="btn btn-brown">Aanvragen</button>
</div>
</form>
And this is my validation script (validation-contact.js):
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('contact'),
{
fields: {
naam: {
validators: {
notEmpty: {
message: 'Vul alstublieft uw naam in'
}
}
},
telefoon: {
validators: {
phone: {
country: 'NL',
message: 'U heeft een ongeldig telefoonnummer ingevuld'
},
notEmpty: {
message: 'Vul alstublieft uw telefoonnummer in'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Vul alstublieft uw emailadres in'
},
emailAddress: {
message: 'U heeft een ongeldig emailadres ingevuld'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
recaptcha: new FormValidation.plugins.Recaptcha({
element: 'captchaContainer',
message: 'The captcha is not valid or expired',
// Replace with the site key provided by Google
siteKey: 'MYSITEKEY',
badge: 'bottomleft',
theme: 'light',
size: 'invisible',
backendVerificationUrl: '/vendor/verification-url.php',
}),
},
})
});
EDIT:
In the head of my page I have:
<link rel="stylesheet" href="/assets/css/fontawesome-all.css" />
<link rel="stylesheet" href="https://unpkg.com/tachyons#4.10.0/css/tachyons.min.css">
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
and in the footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="/vendor/formvalidation/dist/js/FormValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Recaptcha.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Tachyons.min.js"></script>
<script src="/vendor/formvalidation/dist/js/plugins/Bootstrap.min.js"></script>
EDIT:EDIT:
The bottom of my page looks like this:
I had a very similar issue with version 1.3 of FormValidaiton.io. For what it's worth, and in case it helps you, I solved mine by nesting any form-check DIV elements inside a form-group DIV.
<div class="form-group"><div class="form-check"></div></div>
An alternative which also worked was to use the rowSelector option - as specified in this example here.
https://formvalidation.io/guide/examples/validating-checkbox-list-placed-multiple-columns/
<div class="form-row">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input">
</div>
</div>
1.We have to include form-group to all fields in the form.
2. if we have check boxes, include form-check class with respect to form-group class. then add form-check-input class to input tag.
3.if you are using reCapture check box please refer this link (https://formvalidation.io/guide/plugins/recaptcha/)
If you want to identify the error fields. Please remove fields in form validation one by one then check that classList error is getting or not. if we got that error in one particular field. You have to modify that filed only, as mentioned above.
So I have this Semantic UI standard form:
<form id="signup-form" class="ui form" method="post">
<div class="field">
<label>name</label>
<input type="text" name="fullname" id="fullname">
</div>
<div class="field">
<label>username</label>
<input type="text" name="username" id="username">
</div>
<div class="field">
<label>email</label>
<input type="email" name="email" id="email">
</div>
<div class="two fields">
<div class="field">
<label>password</label>
<input type="password" name="password" id="password">
</div>
<div class="field">
<label>password repeat</label>
<input type="password" name="password-repeat" id="password-repeat">
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="terms" id="terms" tabindex="0" class="hidden">
<label>I accept the terms and conditions</label>
</div>
</div>
<button type="submit" value="signup" class="ui blue submit button pull-left">Sign Up</button>
<div class="ui error message"></div>
</form>
And this is the validation script I use:
<script>
$('#signup-form').form({
fields: {
fullname: {
identifier: 'fullname',
rules: [
{
type: 'empty',
prompt: 'can not be empty'
}
]
},
username: {
identifier: 'username',
rules: [
{
type: 'empty',
prompt: 'can not be empty'
}
]
},
email: {
identifier: 'email',
rules: [
{
type: 'email',
prompt: 'can not be empty'
}
]
},
password: {
identifier: 'password',
rules: [
{
type: 'empty',
prompt: 'can not be empty'
},
{
//type: 'regExp[/^[a-z0-9_-]{6,16}$/]',
type: 'regExp[/^[a-zA-Z0-9_]{6,16}$/]',
prompt: 'not valid'
}
]
},
password_repeat: {
identifier: 'password-repeat',
rules: [
{
type: 'match[password]',
prompt: 'must match the password'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type: 'checked',
prompt: 'must accept the rules'
}
]
}
}
});
</script>
Everything works as expected but one thing. After user hits the submit button semantic ui checks the form against the validation rules and if it succeeds it will allow the form to be submitted BUT if it doesn't, it shows the error messages and HIDES the submit button. After that even when user fixes the values of the form, it still shows the errors at the bottom of form and submit button is STILL hidden. Using enter key to submit the form works but that's not a very obvious way.
How do I make sure Semantic UI shows the submit button again after the form is fixed??
Turns out it doesn't actually hide it. It just overlaps it. A simple Bootstrap like clearfix div after the button fixes the problem.
<button type="submit" value="signup" class="ui blue submit button pull-left">Sign Up</button>
<div class="clearfix"></div>
Where clearfix is:
.clearfix,
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
Here is my HTML and JavaScript code
<script src = "../js/jquery.min.js"></script>
<script src="../js / formvalidation / bootstrapValidator.min.js"></script>
<script type="text / javascript">
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
}
});
});
</script>
<form id="staff_add" class="form-horizontal" action="#" method="post" autocomplete="off">
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required="" />
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>
The Select box validation is not working, the textbox validation is working correctly.
I remove select box class selectpicker validation working but to put selectpicker class its not work
You need to add a submitHandler
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
}
submitHandler: function (validator, form, submitButton) {
return false;
}
});
});
You also need to assign value attributes to option elements
Give the fist option value as empty or else it has the value of --Select-- so condition fails.
<option value="">--Select--</option>
Modified
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Sign up</h2>
</div>
<form id="staff_add" method="post" class="form-horizontal" action="target.php">
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<br><br>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required=""/>
<br><br>
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script>
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Fieldsd is required'
}
}
},
}
});
});
</script>
</body>
</html>
For setting an option as "not valid as validation answer" you should disable it:
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option disabled="disabled">--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
#### Apply value="" it works.###
<label>Role</label>
<select class="form-control" id="roleId" required>
<option value="">-Select-</option>
<option value="1">Doctor</option>
</select>
This is my html
<div><center><b class="cust_heading">ONLINE FREIGHT QUOTES</b><br>
Instant prices with multiple carriers</center>
</div>
<div class="field_heading"><b>Shipment type* </b><span id="shipmentError" class="cust_error"></span></div>
<div class="fiftyPercent">
<input type="radio" name="shipment" value="export"> Export
</div>
<div class="fiftyPercent">
<input type="radio" name="shipment" value="import"> Import
</div>
<div class="field_heading"><b>Load type* </b><span id="loadError" class="cust_error"></span></div>
<div class="fiftyPercent">
<input type="radio" name="load" value="fcl"> FCL
</div>
<div class="fiftyPercent">
<input type="radio" name="load" value="lcl"> LCL
</div>
<div style="display:none; width:100%;" id="weight_volume_row">
<div class="fiftyPercent">
Weight (kg)*<span id="lcl_weightError" class="cust_error"></span><br><input type="text" name="lcl_weight" id="lcl_weight" value="" placeholder="e.g 100" style=" width:70%;">
</div>
<div class="fiftyPercent">
Volume (m<sup>3</sup>)*<span id="lcl_volumeError" class="cust_error"></span><br><input type="text" name="lcl_volume" id="lcl_volume" placeholder="e.g 1" value="" style=" width:70%;">
</div>
</div>
<div class="field_heading"><b id="cust_include_text">Include pickup* </b><span id="pickupError" class="cust_error"></span></div>
<div class="fiftyPercent">
<input type="radio" name="pickup" value="yes"> Yes
</div>
<div class="fiftyPercent">
<input type="radio" name="pickup" value="no"> No
</div>
<div class="field_heading"><b id="cust_zipcode_text">Pickup zip code* </b></div>
<div style="width:100%;">
<input id="pickupZipCode" placeholder="Enter a city or zip code" title="pickupZipCode" type="text" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" style=" width:85%;"><input type="hidden" name="postal_hid_data" id="postal_hid_data" value="">
<select name="choosePort" id="choosePort" style=" width:85%; display:none;"><option disabled="disabled" selected="selected" value="">Choose a port</option><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select>
<select name="choosePortOther" id="choosePortOther" style=" width:85%; display:none;"><option value="">Choose a port</option><option value="test4">test4</option><option value="test5">test5</option><option value="test6">test6</option></select>
<span id="zipError" class="cust_error"></span>
</div>
<div class="field_heading"><b id="cust_dest_text">Port of destination* </b></div>
<div style="width:100%;padding:5px 0px;">
<input id="destPort" placeholder="Enter a port or country" title="portDestination" type="text" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" style=" width:85%;"><input type="hidden" name="des_hid_data" id="des_hid_data" value="">
<span id="desError" class="cust_error"></span>
</div>
<div style="width:90%; float:left;padding:5px 0px;">
<input class="searchButton orange-bttn cust_btn" id="cust_form_submit" name="cust_form_submit" type="submit" value="Buscar Naviera" style="float:right;">
</div>
</div>
and my jquery validate form is lookin like this, what is it im doing wrong. Using the wrong form id?
$(function() {
$('cust_main_box').validate({
rules: {
pickupZipCodeUS: {
required: true
},
destPortUS: {
required: true
},
//lcl_weightForm2US: {
//required: true
//},
//lcl_volumeForm2US: {
//required: true
//},
},
messages: {
pickupZipCodeUS: {
required: 'Please enter a valid zip-code',
},
destPortUS: {
required: 'Please enter a valid port',
},
//lcl_weightForm2US: {
//required: 'Please enter a valid weight',
//},
//lcl_volumeForm2US: {
//required: 'Please enter a valid volume',
//},
}
)};
});
The code that was commented out had to do with another form within the jquery, I'd like to include it whenever i figure out what it is i'm doing wrong.
as #undefined already told you, proably the element should be .cust_main_box or #cust_main_box, but the problem in your code is validate closing:
)};
should be
});
So your correct JS:
$(function() {
$('#cust_main_box').validate({
rules: {
pickupZipCodeUS: {
required: true
},
destPortUS: {
required: true
}
//,lcl_weightForm2US: {
//required: true
//},
//lcl_volumeForm2US: {
//required: true
//},
},
messages: {
pickupZipCodeUS: {
required: 'Please enter a valid zip-code'
},
destPortUS: {
required: 'Please enter a valid port'
}
//,lcl_weightForm2US: {
//required: 'Please enter a valid weight',
//},
//lcl_volumeForm2US: {
//required: 'Please enter a valid volume',
//},
}
});
});
Your major problems:
1) The jQuery Validate plugin requires that all input elements to be validated must have name attributes. Those name attributes must also be where your declared rules are assigned.
<input type="text" name="pickupZipCodeUS" ...
<input type="text" name="destPortUS" ...
2) You are missing a form element. The jQuery Validate plugin can only work when the user input elements are contained within a set of <form></form> tags.
3) $('cust_main_box') is not a valid selector in this context. Give the new <form> element an id="cust_main_box" and change the selector to $('#cust_main_box').
<form id="cust_main_box" ...
4) The closing braces for your .validate() call are reversed. They should be this: }).
$('#cust_main_box').validate({
// rules & options
}); // <-- this here
Working Code:
$(function () {
$('#cust_main_box').validate({
rules: {
pickupZipCodeUS: { // <-- this is the field name
required: true
},
destPortUS: { // <-- this is the field name
required: true
}
},
messages: {
pickupZipCodeUS: {
required: 'Please enter a valid zip-code',
},
destPortUS: {
required: 'Please enter a valid port',
}
}
});
});
Working DEMO: http://jsfiddle.net/fTwsG/
You're using a bunch of invalid and deprecated markup, so you should also put your HTML through the W3C HTML Validation tool.