I am using bootstrapValidator (identical) to check both email are same or not , its working fine but I want error messages in the same line, now they are in two lines. See here https://screenshots.firefox.com/abfJ97LEjpAncVoW/localhost . I tried many way and found in google but did not get any solution. Following is my validation code:
$('#formid').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-alert',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstmail: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
},
identical: {
field: '2ndmail',
message: 'The email and its confirm are not the same'
}
}
},
2ndmail: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
},
identical: {
field: 'firstmail',
message: 'The email and its confirm are not the same'
}
}
},
},
})
Following code solved my problem , I have added it below this $('#formId').bootstrapValidator({.....});
$('#formid').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-alert',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstmail: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
},
identical: {
field: '2ndmail',
message: 'The email and its confirm are not the same'
}
}
},
2ndmail: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
},
identical: {
field: 'firstmail',
message: 'The email and its confirm are not the same'
}
}
},
},
})
.on('error.validator.bv', function(e, data) {
// $(e.target) --> The field element
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
// data.validator --> The current validator name
data.element
.data('bv.messages')
// Hide all the messages
.find('.help-block[data-bv-for="' + data.field + '"]').hide()
// Show only message associated with current validator
.filter('[data-bv-validator="' + data.validator + '"]').show();
});
Related
On my single product page I have activated the ratings form.
Visitors are able to leave a rating which requires the following inputs:
1 to 5 stars
A message
E-Mail
Privacy policy checkbox
Captcha-Code
If any of those fields are missing I get redirected to the default error page from wordpress.
I already tried to create my own validation using jquery -> jquery.validate.js
Based on the information from the following question.
/* Comment form validation on same page */
function comment_validation_init() {
if (is_single() && comments_open()) {
?>
<script type="text/javascript" src="/js/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
console.log("ready");
$('#commentform').validate({
rules: {
author: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 20
}
},
messages: {
author: "Please enter your name",
email: "Please enter a valid email address.",
comment: "Please enter your comment"
},
errorElement: "div",
errorPlacement: function(error, element) {
element.after(error);
}
});
});
</script>
<?php
}
}
add_action('wp_footer', 'comment_validation_init');
After the form submission I still get redirected to the default wordpress error page. (wp-comments-post.php)
Is there any other way to prevent that from happening and display the errors within the form? (without changing the core files)
Since the form was loaded by Ajax the validation wasn´t working.
As a workaround I triggered my validation through the forms submit button.
$(document.body).on('click', '#commentform #submit', function(){
$("#commentform").validate({
rules: {
author: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
comment: {
required: true,
minlength: 20
}
},
messages: {
author: "Please enter your name",
email: "Please enter a valid email address.",
comment: "Please enter your comment"
},
errorElement: "div",
errorPlacement: function(error, element) {
element.after(error);
}
});
}
If someone got a "better" solution I would highly appreciate the information.
I am running into a bit of an issue, I have a user object which I have an array where a user can set their own styling options when I attempt to load the page where this styling is needed I get a following error
Error
TypeError: Cannot read property 'primaryColor' of undefined
Code
HTML: <div class="container-fluid" style="background-color:<%=user.branding.primaryColor%>;">
Route:
router.get("/:username", function (req, res) {
User.find({ username: req.params.username}, function (err, foundUser) {
if(empty(foundUser)){
res.render("error", {err:"the user " +req.params.username + " does not exist "})
} else {
if (err) {
console.log("Oh no error: ", err)
}
Link.find().where('author.id').equals(foundUser._id).exec(function (err, foundLinks) {
if (err) {
console.log("Oh no error 2: ", err);
}
res.render('dashboard/preview', {
user: foundUser,
links: foundLinks,
});
});
}
});
});
foundUser:
[
{
links: { link: [] },
settings: { accountIsAccountActive: true, darkMode: false },
branding: {
primaryColor: '#D46975',
secondaryColor: '#9646C8',
image: 'https://i.ya-webdesign.com/images/default-image-png-1.png',
linkRadius: '15px',
linkColor: '#FFFFFF'
},
_id: 5eef79490e264c,
firstname: 'testy',
lastname: 'test',
username: 'test',
__v: 0
}
]
I am starting to feel like this may not be possible, thank you in advance for the help!
foundUser is an array. In your HTML code, you need to use
user[0].branding.primaryColor
Or
change mongo query from
User.find()
to
User.findOne()
Or
Assign foundUser[0] to user.
res.render('dashboard/preview', {
user: foundUser[0],
links: foundLinks,
});
The problem is that submit doesn't validate other tabs. If I remove hidden from excluded list it validates but the problem it also then validates hidden input boxes.
How can i get it to validate all tabs but not validate hidden fields inside the tabs? How to fix this?
Here is some of the code from the validation section-.
jQuery('#form').bootstrapValidator({
container: '#messages',
excluded: [':disabled'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Name: {
validators: {
notEmpty: {
message: 'Name is required.'
}
}
},
EmployerName: {
validators: {
notEmpty: {
message: 'Employer Name required.'
}
},
JobTitle: {
validators: {
notEmpty: {
message: 'JobTitle required.'
}
}...
Name field is on the active tab
EmployerName & Job Title are in seperate tab to Name.
Job Title is in a Div that is hidden.
When code runs Job Title is validated as well as Employer Name. Job Title shouldnt be as its hidden. If i include hidden in the excluded list, EmployerName doesnt validate anymore. I hope this is a little clearer.
I am looking for a way to retrieve all validation errors. (I'm using Collection2 and SimpleSchema)
Consider this code:
Foo.insert({
title: '',
description: ''
}, function(error, result) {
console.error(error);
});
output:
{
message: 'Title may not be empty.',
invalidKeys: [
0: {
name: 'title',
type: 'required',
value: ''
},
1: {
name: 'description',
type: 'required',
value: ''
}
]
}
I would like to have all the error messages that are related to validation.
Unfortunately I couldn't find any solution for this.
SOLUTION:
I've found a satisfiable solution
Foo.simpleSchema().namedContext().keyErrorMessage('title');
I ran into the same problem and my solution was to insert said errors into a client mongo error collection which would then display the errors to the user. The following is what I came up with:
Schema
Schema.newUser = new SimpleSchema({....});
Client Side Validation
function tokenRegistration (newUser) {
var valContext = Schema.newUser.namedContext('tokenRegForm');
if (!valContext.validate(newUser)) {
var keys = valContext.invalidKeys();
_.each(keys, function (value) {
var error = value.name,
message = valContext.keyErrorMessage(error);
return ErrorMessage.insert({errormessage: message})
});
}
}
the question says it all. i've an asp.net page using jquery. at first when i clicked the submit button, it'd show the object expected error. i ran the firebug and it displayed the error of 'return validate()' function which was added onClientClick of the button.
<script type="text/javascript">
$(document).ready(function() {
// add custom validation methods
$.validator.addMethod('phone', function(value, el, params) {
return this.optional(el) || /^[0-9,+,(), ,]{1,}(,[0-9]+){0,}$/.test(value);
}, 'Please enter a valid phone number');
$.validator.addMethod('numbers', function(value, el, params) {
return this.optional(el) || /^[0-9]+$/.test(value);
}, 'Invalid entry. Only Numeric is allowed.');
$.validator.addMethod('domainurl', function(value, el, params) {
return this.optional(el) || /^(http\:\/\/(?:www\.)?[a-zA-Z0-9]+(?:(?:\-|_)[a-zA-Z0-9]+)*(?:\.[a-zA-Z0-9]+(?:(?:\-|_)[a-zA-Z0-9]+)*)*\.[a-zA-Z]{2,4}(?:\/)?)$/.test(value);
}, 'Please enter a valid domain url');
$.validator.addMethod('selectone', function(value, element) {
return this.optional(element) || (value.indexOf("none") == -1);
}, 'Please select an option.');
$("#form1").validate({
debug: true,
rules: {
txt_name: {
required: true,
minlength: 2
},
txt_cmp: {
required: true,
minlength: 2
},
txt_tel1: {
phone: true,
required: true,
minlength: 3
},
txt_tel2: {
phone: true,
required: false,
minlength: 3
},
txt_mob: {
phone: true,
required: false,
minlength: 9
},
txt_email: {
required: true,
email: true
},
txt_domname: {
required: true,
domainurl: true
},
radiobt_domain: "required",
ddl_yremail: {
required: true,
selectone: true
},
ddl_email: {
required: true,
selectone: true
},
txt_space: {
required: true,
numbers: true
},
txt_calfr: {
required: true
},
txt_calto: {
required: true
}
},
messages: {
txt_name: {
required: "This field is required",
minLength: "Please enter a valid name"
},
txt_cmp: {
required: "This field is required",
minLength: "Please enter a valid commpany name"
},
txt_tel1: {
required: "This field is required",
minLength: "Please enter a valid telephone number"
},
txt_tel2: {
minLength: "Please enter a valid telephone number"
},
txt_mob: {
minLength: "Please enter a valid mobile number"
},
txt_email: {
email: "Please enter a valid email address",
required: "This field is required"
},
txt_domname: {
required: "This field is required"
},
radiobt_domain: "Select the Hosting Type"
}
});
});
</script>
i removed it, and now the submit button is still not working. the server-side code is not executing. it isn't showing any error. i can't figure out what is the problem.
i've posted the code here: object expected - jquery
EDIT: After seeing the code. The reason why the form is not submitting even after you remove the call to Validate() in your button is because you have debug:true, this prevents the form submission. Change it to debug: false and it will submit.
$("#form1").validate({
debug: false,
.....
I believe your problem is that the form submission is not working because you have a javascript parsing error. Can you check the Firebug console to see if there are any errors occuring on when the page loads. Any javascript errors are likely to break the form submission process.
Looking at your previous question, I would guess that you may not have included the validation plugin since validate isn't defined. This error is still probably occurring and the rest of the javascript on the page -- including all the ASP.NET added javascript may not be parsed.
Do you have a script include for the validate plugin? it would look something like this:
<script type="text/javascript" src="..../jquery.validate.js"></script>