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.
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.
Using Semantic-ui.
Have a form that uses Semantic built in form validation.
On form submit I want to call a dimmer.
Is there a way to trigger the dimmer after the form passes validation.
As it is now I have the dimmer connected to a onclick="dimmer()" on the submit button.
This means that the dimmer triggers even if the form is not submitting because of failed validation.
onSuccess: function(event, fields) {
dim();
}
example
$(document)
.ready(function() {
$('.ui.form')
.form({
fields: {
trailer: {
identifier : 'trailer',
rules: [
{
type : 'empty',
prompt : 'Please select a Trailer'
}
]
},
movie: {
identifier : 'movie',
rules: [
{
type : 'empty',
prompt : 'Please select a Movie'
}
]
}
},
onSuccess: function(event, fields) {
dim();
}
})
;
})
;
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();
});
I'm using autoform and simple schema and I've defined a schema object with the following field:
confirm_nominee: {
type: Boolean,
autoform: {
type: "select-checkbox-inline",
options: function () {
return [
{
label: "Check here to certify that the volunteer nominated in the application is not a current member of the organization’s Board of Directors.",
value: 1
}
];
}
}
},
I just want it so if the box is left unchecked, the error reports "This field is required" and if it's checked, then the user is good to go.
This seems like it should be a really simple validation of whether the checkbox is checked or not. I've tried adding in a defaultValue of 0, but that doesn't work either.
Any thoughts?
Thanks so much.
Set in your schema rules the key allowedValues: [true] and the checkbox must be checked to be true and pass validation
confirm_nominee: {
type: Boolean,
autoform: {
type: "select-checkbox-inline",
allowedValues: [true],
options: function () {
return [
{
label: "Check here to certify that the volunteer nominated in the application is not a current member of the organization’s Board of Directors.",
value: 1
}
];
}
}
We are using a server based simple grid. The grid reads and updates data for a remote data source. It has two columns that are using drop down editors. Everything seems to work fine except that after saving, when editor closes, the changed values are not displayed in the edited row. It still shows the old value. When we try to refresh the grid using the sync event, it changes the order of the rows however, it does update the values on refresh.
It seems like the template function is not executed after the update is completed. How to edit the grid / code to ensure that the changed value is reflected in the grid?
Grid Definition code:
$("#servicetype-grid").kendoGrid({
pageable: true,
toolbar: [{name: "create", text: ""}, { template: kendo.template($("#servicetype-search-template").html())}],
columns: [
{
field: "serviceName", title: "Service Name"
},
{
field: "billCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.billCalculationTypeName);
},
title: "Bill Calculation Type"
},
{
field: "payCalculationTypeId",
editor: calculationTypeDropDownEditor,
template: function(dataItem) {
return kendo.htmlEncode(dataItem.payCalculationTypeName);
},
title: "Pay Calculation Type"
},
{
command: [
{ name: "edit", text: { edit: "", cancel: "", update: "" }},
{ name: "destroy", text:""}
],
title: "Actions"
}
],
dataSource: dataSource,
sortable: {
mode: "single",
allowUnsort: false
},
dataBound: function(e) {
setToolTip();
},
edit: function(e) {
$('.k-grid-update').kendoTooltip({content: "Update"});
$('.k-grid-cancel').kendoTooltip({content: "Cancel"});
},
cancel: function(e) {
setToolTip();
},
editable: {
mode: "inline",
confirmation: "Are you sure that you want to delete this record?"
}
});
Drop down function is defined as:
function calculationTypeDropDownEditor(container, options) {
$('<input required data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: baseURL + "rips/services/calculationType/lookupList"
}
}
}
});
}
After doing some search on Google and browsing through different examples on Kendo site, I finally was able to resolve this issue. Following is my understanding of the problem and solution:
When we are using drop down box or combo box as a custom editor, generally we have a different datasource that contains a list options with an id and a value to show. I defined the template as "#=field.property#" of the field that I was looking up. In my case it was calculation type. Following is my model:
model: {
id: "serviceId",
fields: {
serviceName: { field:"serviceName", type: "string", validation: { required: { message: "Service Name is required"}} },
billCalculationType: { field: "billCalculationType", validation: { required: true}},
payCalculationType: { field: "payCalculationType", validation: { required: true} }
}
In above, billCalculationType and payCalculationType are supposed to be drop down list values displaying the calculation type name but storing the id of the corresponding calculation type. So, in my grid definition, I added following:
{ field: "billCalculationType",
editor: calculationTypeDropDownEditor,
template:"#=billCalculationType.name#",
title: "Bill Calculation Type" },
Where calculation dropdown editor is a function that builds a drop down from external data source. So, it works fine. However, for the template definition to work in (field.property) format, the server must return the value as a class for this field and not a simple text. So, in my server service, I returned in following format:
{"billCalculationType":{"id":"4028828542b66b3a0142b66b3b780001","name":"Hourly","requiredDetails":false},"payCalculationType":{"id":"4028828542b66b3a0142b66b3b960002","name":"Kilometers","requiredDetails":false},"serviceId":"4028828542b66b3a0142b66b3c16000a","serviceName":"XYZ"}
Notice that the billCalculationType and payCalculationType are returned as objects with name and id as properties. This allows the template to work properly.
Hope this helps.