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;
}
Related
When submitting a form, the onSuccess callback is still called even then the validation fails.
Why is it being called when the form is not valid?
Example here: https://jsfiddle.net/tL5xx6m9/7/
Snippet:
Verbose explanation to satisfy code/text ratio for submission:
In this snippet I have text that gets written when the onSuccess event is called. By clicking submit you will see that the form is not valid, and that the onSuccess text gets written. Under that text is the bool for whether the form is valid or not by calling $(".ui.form").form('is valid').
$(".ui.form").form({
onSuccess: function(event, fields) {
SubmitForm(fields);
event.preventDefault();
}
});
//Processes the forms data for a submission
function SubmitForm(fields) {
var valid = $(".ui.form").form('is valid');
$('#successText').html("On Success Called" + "<br> Is Valid: " + valid);
console.log("Submitting Form");
console.log(fields);
}
$('.ui.form').form({
fields: {
input1: {
identifier: 'input1',
rules: [{
type: "empty",
prompt: "input1 - This field is required"
}]
},
input2: {
identifier: 'input2',
rules: [{
type: "empty",
prompt: "input2 - This field is required"
}]
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<form class="ui form attached fluid segment">
<div class="field">
<input name="input1" type="text" placeholder="input1" id="testRemoveField">
</div>
<div class="field">
<input name="input2" type="text" id="" placeholder="input2">
</div>
<button class="ui teal button" type="submit">Submit</button>
<div class="ui error message"></div>
<div id="successText">
</div>
</form>
It appears that by having two separate .form() method calls, it creates two validation checks that execute independently from each other. So the first call without rules will always be successful.
Move the onSuccess event to the same call as your validation rules and it starts to work as intended.
//Processes the forms data for a submission
function SubmitForm(fields) {
var valid = $(".ui.form").form('is valid');
$('#successText').html("On Success Called" + "<br> Is Valid: " + valid);
console.log("Submitting Form");
console.log(fields);
}
$('.ui.form').form({
fields: {
input1: {
identifier: 'input1',
rules: [{
type: "empty",
prompt: "input1 - This field is required"
}]
},
input2: {
identifier: 'input2',
rules: [{
type: "empty",
prompt: "input2 - This field is required"
}]
}
},
onSuccess: function(event, fields) {
SubmitForm(fields);
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<form class="ui form attached fluid segment">
<div class="field">
<input name="input1" type="text" placeholder="input1" id="testRemoveField">
</div>
<div class="field">
<input name="input2" type="text" id="" placeholder="input2">
</div>
<button class="ui teal button" type="submit">Submit</button>
<div class="ui error message"></div>
<div id="successText">
</div>
</form>
I am using formvalidation.io but I cannot stop the form submitting on successful validation. It immediately submits request and refreshes page. I need to send form information via ajax.
I must be overlooking something obvious?
http://jsfiddle.net/k281at67/94/
The HTML:
<form method="post" id="estimateForm1" class="form-horizontal bv-form">
<input type="hidden" name="page_source" id="page_source" value=""/>
<fieldset>
<input type="hidden" name="RefferingPage" value="' . $page . '" />
<div class="form-group">
<div class="row">
<div class="col-md-8 pad_right">
<input type="text" class="form-control" name="Name" placeholder="*Your name" value="" />
</div>
</div><!--row-->
</div><!--form group-->
<div class="form-group">
<div class="row">
<div class="col-md-8 pad_right">
<input type="text" class="form-control" name="Phone" placeholder="*Phone" class="phone" value="111-111-1111" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8 pad_right">
<input type="text" name="Email" class="form-control" placeholder="*Email" id="" value="pie#aol.com"/>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-2 col-md-offset-5 col-xs-2">
<button class="btn btn-default" type="submit" disabled="disabled">
<i class="fa fa-eye"></i>
Validate
</button>
</div>
</div>
</div>
</fieldset>
</form>
The Javascript
jQuery('#estimateForm1')
.formValidation({
framework: 'bootstrap',
err: {
container: 'tooltip'
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Name: {
row: '.col-md-8',
validators: {
notEmpty: {
message: 'The first name is required'
},
stringLength: {
min: 2,
message: 'Must be at-least 2 characters long.'
},
regexp:
{
message: 'Please only use A-Z characters.',
regexp: /^[a-zA-Z]+$/
}
}
},
Phone: {
row: '.col-md-8',
validators: {
notEmpty: {
message: 'The phone number is required'
},
stringLength: {
min: 14,
max: 15,
message: 'Not a valid phone #.'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
Email: {
row: '.col-md-8',
validators: {
notEmpty: {
message: 'The email address is required'
},
regexp: {
regexp: '^[^#\\s]+#([^#\\s]+\\.)+[^#\\s]+$',
message: 'The value is not a valid email address'
}
}
}
}
}).find('[name="Phone"]').mask('(000) 000-0000')
.on('success.field.fv', function(e, data) {
if (data.fv.getSubmitButton()) {
e.preventDefault();
//data.fv.disableSubmitButtons(true);
console.log('prevented submission');
}
}).on('success.form.bv',function(e)
{
e.preventDefault();
console.log('prevented submission');
});
You have a typo in your code:
This =>
.on("success.form.bv", function(e) { ...
should be =>
.on("success.form.fv", function(e) { ...
You have to trigger the event on the form instance, not the Phone field.
I suggest you to do the following:
jQuery('#estimateForm1')
.find('[name="Phone"]')
.mask('(000) 000-0000')
.end() // <=== DON'T FORGOT TO ADD THIS
.formValidation({
// ...
})
.on('success.field.fv', function(e, data) {
// ...
})
.on('success.form.fv',function(e) {
e.preventDefault();
console.log('prevented submission');
});
See Using Ajax to submit the form example.
Try this
.on('success.form.bv',function(e)
{
e.preventDefault();
return false;
console.log('prevented submission');
});
This function to stop call submit event. It should be calling manual
$(document).ready(function() {
$("#formname").submit(function(e) {
e.preventDefault();
});
});
Second option should be good for validation of form to client side. If you validate all value to return true then fire submit event other wise not fire.
function validation() {
return false;
});
But calling function on submit button like this
onclick="return validation()
I am trying to use jquery validation for a php form to change your password but I keep getting the error "Your password must be the same as above" when the password is correct. I can't seem to find out where I have went wrong at all... Here's the JS code
var changepassword = function() {
return {
init: function() {
/*
* Jquery Validation, https://github.com/jzaefferer/jquery-validation
*/
$('#changepassword').validate({
errorClass: 'help-block animation-slideUp',
errorElement: 'div',
errorPlacement: function(error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function(e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function(e) {
if (e.closest('.form-group').find('.help-block').length === 2) {
e.closest('.help-block').remove();
} else {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
}
},
rules: {
'newpassword': {
required: true,
minlength: 6
},
'newpassword-verify': {
equalTo: '#newpassword',
required: true
}
},
messages: {
'newpassword': {
required: 'Please provide a password',
minlength: 'Your password must be at least 6 characters long'
},
'newpassword-verify': {
required: 'Please provide a password',
minlength: 'Your password must be at least 6 characters long',
equalTo: 'Please enter the same password as above'
}
}
});
}
};
}();
This is the PHP/HTML for the form
<form method="POST" class="form-horizontal form-bordered" id="changepassword">
<div class="form-group">
<label class="col-md-3 control-label" for="newpassword">New Password</label>
<div class="col-md-6">
<input type="password" id="newpassword" name="newpassword" class="form-control" placeholder="New Password" required>
</div>
</div>
<!-- This is where I keep getting the error -->
<div class="form-group">
<label class="col-md-3 control-label">Repeat Password</label>
<div class="col-md-6">
<input type="password" id="newpassword-verify" name="newpassword-verify" class="form-control" placeholder="Repeat Password" required>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="oldpassword">Current Password</label>
<div class="col-md-6">
<input type="password" id="oldpassword" name="oldpassword" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group form-actions">
<button type="submit" name="update" class="btn btn-block btn-primary">Update</button>
</div>
</form>
Sorry, I was able to fix it by making a new file called settings1.php then removing the old one and renaming the new one with the old name.
I'm creating a web application using Express and Jade. I want to validate a form using jQuery Validation. It does not give any errors, but when I insert wrong values in the form, it does not complain either. It just sends the data to the Express server.
This is my form:
form.form-horizontal(#signupForm, method='post', action='')
.form-group
label.col-sm-2.control-label(for='firstName')
| First Name:
.col-sm-10
input.form-control( #firstName,
type='text',
placeholder='John',
name='firstName')
.form-group
label.col-sm-2.control-label(for='lastName')
| Last Name:
.col-sm-10
input.form-control( #lastName,
type='text',
placeholder='Doe',
name='lastName')
.form-group
label.col-sm-2.control-label(for='password')
| Password:
.col-sm-10
input.form-control( #password,
type='password',
placeholder='Password (minimum 8 characters)',
name='password')
.form-group
label.col-sm-2.control-label(for='confirmPassword')
| Confirm Password:
.col-sm-10
input.form-control( #confirmPassword,
type='password')
.form-group
.col-sm-2.control-label
button.btn.btn-default(type='submit')
| Sign Up!
This is the rendered HTML:
<form #signupform="" method="post" action="" class="form-horizontal">
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input #firstname="" type="text" placeholder="John" name="firstName" class="form-control">
</div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input #lastname="" type="text" placeholder="Doe" name="lastName" class="form-control">
</div>
</div>
...
<div class="form-group">
<div class="col-sm-2 control-label">
<button type="submit" class="btn btn-default">Sign Up!</button>
</div>
</div>
</form>
This is my JavaScript file:
$(document).ready( function() {
$('#signupForm').validate({
rules: {
firstName: {
required: true
},
lastName: {
required: true
},
password: {
required: true,
minlength: 8
},
confirmPassword: {
required: true,
equalTo: '#password'
}
},
messages: {
firstName: {
required: 'This field is required!'
},
lastName: {
required: 'This field is required!'
},
password: {
required: 'This field is required!',
minlength: 'This password is too short!'
},
confirmPassword: {
required: 'This field is required!',
equalTo: 'This password is not the same!'
}
}
});
});
At a first glance, your id's should look like this:
"lastName": { required: 'This field is required'}
Edit
Seeing your html, your renderd input had a problem with the Id's.
<input #lastname=""
should be
<input id="lastname">
The same goes for your form id.
Edit
As mentioned below, the name attribute is used for validation targeting.
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.