I have marked my controls with the Required attribute.
This has caused them to not only error on the lost focus event ( which is good ) but the problem is it won't even let me continue entering values in OTHER columns and controls of the grid on the form until I first type something for the required control.
Is there a way to delay this required validation to when I submit the form?
You can bind the .getKendoValidator(); method to your form which allow you to delay your validation.
You need to set button type ="Submit"
Refer the following line of code :-
var form_validator = $("#form_reg").kendoValidator({
rules: {
/*..*/
},
messages: {
/*..*/
}
}).getKendoValidator();
Also note that as the Validator is attached to a form element,
the validation will be executed automatically when the form is submitted, which in this case is when the button is clicked. Therefore, there is no need to manually call the validate method.
Note:-execute some custom logic, like alert to the user, when form is validated you may use
validate event.
Related
I have an OpenUI5 form consisting of a number of Inputcontrols. These Inputcontrols are bound to a model using the OpenUI5 DataBinding as described in the documentation.
For example:
new sap.m.Input({
value: {
path: "/Position/Bezeichnung",
type: new sap.ui.model.type.String(null, {
minLength: 1,
maxLength: 128
})
}
})
As in the example above I'm using constraints on the stringlength.
When a User changes the Value of the Input, the Validation is triggered and according to the Validationresult one of the functions descripted here is called.
In these functions I'm setting the ValueState of the control like this:
setupValidation: function() {
var oCore = sap.ui.getCore();
oCore.attachValidationError(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
oCore.attachValidationSuccess(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.None);
});
oCore.attachFormatError(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
oCore.attachParseError(function (oEvent) {
oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
},
Let's assume the bound model variable is initial.
I'm loading the view, the property value is parsed and displayed as empty.
The Validationerror/Parseerror method is not called although the constraints are not met.
This seems to be standard behaviour of OpenUI5. Only changes in the Control will be a validated.
Now let's assume I've a submit button and the Value of the Inputcontrol is still empty. When the user hits the submit button I'd like to trigger the DataBinding Validation for all childcontrols of my view. This would validate the above mentioned input and would result in an errorstate.
My question is: How can I trigger the databinding validation for all childcontrols of my view?
There is another question on SO where the poster asks for a way to define required fields. The proposed solution is to call getValue() on the control and validate the value manually. I think this is kind of cumbersome as formating and constraint information and logic is already present.
I suggest looking into field groups.
An example here in the UI5 docs
Field Groups allow you to assign group IDs to the input fields. Then you can call all of the input fields at once. You can set the name property and required property on each <Input> separately in your view, allowing you to handle some logic when you perform validation.
You can call this.getView().getControlsByFieldGroupId("fieldGroupId"), which will return an array of the input controls. Then you can loop through the controls, pass them through your logic, and use setValueState() to show the results.
Or, you can assign the validateFieldGroup event on the parent container, which is usually a form, but can be anything like a <VBox> that contains the controls. When the users focus moves out of the field group, the event is fired. You can then use the event handler in your controller to perform the validation.
In your case, I would assign a press event to your submit button, and in the handler, call the field group by ID and loop through the controls. At the end of your function, check to see if all fields are validated before continuing.
View
<Input name="email" required="true" value="{/user/email}" fieldGroupIds="fgUser"/>
<Input name="firstName" required="false" value="{/user/firstName"} fieldGroupIds="fgUser"/>
<Button text="Submit" press="onSubmit"/>
Controller
onSubmit: function() {
var aControls = this.getView().getControlsByFieldGroupId("fgUser");
aControls.forEach(function(oControl) {
if (oControl.getRequired()) {
//do validation
oControl.setValueState("Error");
oControl.setValueStateText("Required Field");
}
if (oControl.getName() === "firstName") {
//do validation
oControl.setValueState("Success");
}
});
var bValidated = aControls.every(function(oControl) {
return oControl.getValueState() === "Success";
});
if (bValidated) {
//do submit
}
}
The concept goes like this.
Use custom types while binding, to define validations. Validation
rules go inside these custom types (in the method 'validateValue').
When Submit is pressed, loop through the control hierarchy and
validate each control in your view. (By calling 'validateValue'
method of the Custom Type).
Validator (https://github.com/qualiture/ui5-validator ) uses this concept and it is a small library to make your life easy. Its main advantage is that it recursively traverses through the control library.
Using Message Manager (using sap.ui.get.core().getMessageManager() ) is the way to show the validation messages on the UI control.
Triggering data binding validations is not possible. Rather for empty fields that are having required property true you can do a work around using jQuery.
Please refer my answer to this same problem at Checking required fields
I have a simple dropdown with two values.Lets say Staus:active and inactive.
During the onchange event, I want to perfrom some validation and revert back if the validation fails. Thai is if I change from active-inactive and my validation fails, I should change the dropdown back to active.
So far I am able to catch the on change event through the dataevents options of editOptions.
Below is my code, Thanks for the assist.
editoptions:{value:{Y:'Active',N:'Inactive'}, dataEvents:[
{
type: 'change',
fn: function(e) {
alert("inside change trigger");
$grid.setColProp('Status', { editoptions:{value:{Y:'Active',N:'Inactive'}}});
}
}
]}
I also read I have to set recreate form :true. I tried that also.
I would recommend you to consider to make the column non-editable or to readonly/disabled if the validation condition could be checked before editing will be started. It shows the user more clear that the field mayn't be changed.
Alternatively you can get savedRow parameter of jqGrid if you use inline editing mode or cell editing mode (with var savedRows = $(this).jqGrid("getGridParam", "savedRow")). To get the "old" data in case of form editing you can just get the data of selected row by using getGridParam with selrow (or alternatively from the hidden field of the form which have id="id_g". Something like var serRowId = $("#id_g").val();) and by using getRowData/getCell.
I have a form in an ASP.Net MVC project on which I am using qTip2 to display validation erros. On that form, I also have text fields that are activated/deacivated depending on choices made with radio buttons. When fields are not to be used, I set their disabled="disabled" properties. This ensures that client side validation (jQuery unobtrusive validation) for these fields is also deactivated. Now, I am wondering how to reset the qTip2 "bubbles" for fields that get disabled.
Let's say I have radio buttons 1 and 2 that enable text boxes A and B respectively. Let's also say that radio button 1 is selected by default, and that text boxes A and B are required fields when the corresponding radio button is selected. If I press on the Submit button without filling any text field, a qTip error bubble appears beside text box A. Now, if I press on radio button 2, I have to clear that bubble, disable text box A and its validation, and enable text box B and its validation. However, if I press submit at this point without filling text box B, no error bubble appears and the form is not getting submitted.
I tried various combinations of the following commands to accomplish this, but then the validation errors get completely disabled:
$('.qtip').remove();
$('.qtip').hide();
$("input.input-validation-error").removeClass("input-validation-error"); // watch out for the error message labels or they won't go away
$('form').data('validator').resetForm();
$("form").validate().form();
No matter what combinations of these commands I execute after a radio button got clicked and the proper text-boxes disabled/enabled, the qTip bubbles disappear, but they never reappear even if I click on the Submit button and other errors should appear on the form.
I am probably not using the right commands to reset qTip validation bubbles.
Ok, I found a solution right after posting the question. I used the solution proposed on this page http://johnculviner.com/?tag=/unobtrusive-validation-reset that I modified a bit. I added the following line: $form.find('input').qtip('destroy');
It gives this:
//Taken from: http://johnculviner.com/?tag=/unobtrusive-validation-reset
(function ($) {
$.fn.resetValidation = function () {
var $form = this.closest('form');
//Destroy qTip error bubbles (http://craigsworks.com/projects/forums/thread-using-qtip-with-jquery-validation-framework)
//$form.find('input:not(.errormessage)').qtip('destroy');
$form.find('input').qtip('destroy');
//reset jQuery Validate's internals
$form.validate().resetForm();
//reset unobtrusive validation summary, if it exists
$form.find("[data-valmsg-summary=true]")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid")
.find("ul").empty();
//reset unobtrusive field level, if it exists
$form.find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
return $form;
};
//reset a form given a jQuery selected form or a child
//by default validation is also reset
$.fn.formReset = function (resetValidation) {
var $form = this.closest('form');
$form[0].reset();
if (resetValidation == undefined || resetValidation) {
$form.resetValidation();
}
return $form;
}
})(jQuery);
Then when a radio button is clicked, I call $("form").resetValidation(); after the proper fields have been enabled/disabled.
I have a page of products and for each of them, I want to have a form that uses AJAX to update the session. I've done this bit - just providing background.
I use the product's ID to create a different form class and name for each form, so each form is called something like this_form_name_567 and the next would be this_form_name_568 and so on.
There is a submit button per form. I'm having trouble figuring out
Which event is best to use so that the correct form will be identified when a submit button is clicked?
Once clicked, how to then make sure the correct value is taken from a hidden field (unique ID) within the submitted form so that I can populate a line of code such as:
$.post("compare_response.php", {compare_this: $("#compare_this").val()}, function(data){
}
You can use the .closest tree traversal method to get the form in which the button of interest is nested:
$("input[type=submit]").click(function() {
alert($(this).closest("form").attr("id"));
});
or even simpler, just get the element's form property :)
$("input[type=submit]").click(function() {
alert(this.form.id);
});
You can try it out here.
You can get the form you are submitting like this:
$('form').submit(function() {
var yourForm = $(this);
var hiddenValue = $(this).find('input[type=hidden]').val();
});
Of course you can get the hidden value differently, or if you have more than one hidden you'll have to give a little more information about it.
I have a basic checkbox click function that only allows the user to click only one checkbox within each fieldset (there are four fieldsets each containing numberous checkboxes:
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
// get the fieldset class
var fieldset = $(this).parents('fieldset').attr('class');
// set the number of checked
var numChecked = $('.'+fieldset+' input:checked').size();
// if more than 1
if(numChecked > 1){
alert('Please select only one option per breakout session.')
$(this).attr('checked',false);
}
});
Then I have a submit function on the form that will confirm that at least one checkbox is selected before posting the form:
$('form[name=mainForm]').submit(function(){
var error = '';
// loop through each fieldset
$('fieldset',this).each(function(){
// set the number of checked for this fieldset
var numChecked = $('input:checked',this).size();
// if none are checked
if(!numChecked){
// set the error var
error = 'At least one of your time sessions has no checkbox selected!';
// add class to show user
$(this).addClass('errorSessions');
}
else{
$(this).removeClass('errorSessions');
}
});
// if any errors, show them and don't allow the form to be submitted
if(error.length){
alert(error);
return false;
}
$("#mainForm").validate();
The form validates perfectly and everything happens flawlessly the first time around. The problem is that if you submit the form, the validation occurs and it gives the error "At least one of your time sessions has no checkbox selected!" - at that point if you proceed to select multiple checkboxes within a given fieldset that was not initially checked, it will ignore the checkbox click function and allow you to select more than one checkbox in a fieldset.
Can someone please help with this?
Okay, I figured it out. The error has to do with the script adding the class 'errorsessions' to the fieldset which changes the unique classname of the fieldset. By adding a unique id to each fieldset and then changing the script to reference .attr('id'); instead of .attr('class'); the issue resolved and the on click alert function resumed after the class was added.
Do you consider using radio buttons as they are there for single selection? This way you don't have to check for multi selection as it isn't possible for select more than one radio button in given group.