I am using Jquery validation plugin for my form validation.
I just use this one as sample.
http://jquery.bassistance.de/validate/demo/milk/
there's one problem. first time you load the form. click on the first field, dont put anything there, then click on the "tab" button to move to the next input field, the error message is not showing, but that field is labeled as "required".
is there a way to fix it? or that is how it supposed to be it.
According to the Validate plugin's reference for onblur:
If nothing is entered, all rules are skipped, except when the field was already marked as invalid.
But you can force it to validate yourself by binding the inputs' blur event:
$("#signupform input").blur(function() {
$(this.form).validate().element(this);
});
$('#id).filter(function() { return $(this).val() == ""; });
You can get fields with empty value and ca validate.
You can also add class and can get all empty fields of that class i.e.
$('.className).filter(function() {
return $(this).val() == "";
});
Related
I'm using Laravel and I have a dropdown which fills its options from the database on load page and another text field.
Then on the submit I validate the text field to avoid empty entries, the validation is based on the request validator from Laravel. The validation is made correctly.
The problem is that when the validation is completed (it doesn't submit because i keep the text field empty) it returns to the page, but the dropdown remains selected with the last selection by the user, but in the back(sourcecode), its selected the original value that was loaded originally.
I want that the selectedIndex is the one original from the load page, not the last one selected. I tried with javascript but I had no luck change in it since it's already as the selectedIndex, but to the user, it still showing the other option. If I refresh manually it still showing the selected one incorrectly, I need to enter the URL manually so it shows correctly.
What could be a good approach to solve this "visual" issue?
Here is the controller code
public function update($user_id,GuardarBancoRequest $request)
{
$cuenta = user::whereId($user_id)->first();
$cuenta->nombrecompleto = Input::get('completo');
$temp = Input::get('tipo');
$cuenta->tipocuenta = Input::get('tipo');
$temp1 = Input::get('banco');
if ($temp == "1") {
$cuenta->cuentaclabe = Input::get('clabehidden');
$cuenta->cuentatarjeta = Input::get('cuentahidden');
} else {
$cuenta->cuentatarjeta = Input::get('cuentahidden');
$cuenta->cuentaclabe = Input::get('clabehidden');
}
if ( $temp1 == "10") {
$cuenta->otrobanco = Input::get('otro');
$cuenta->banco = "10";
} else {
$cuenta->banco = Input::get('banco');
$cuenta->save();
}
return Redirect::route('bancos.show',array(Auth::user()->id));
}
The dropdown that I'm referring is the [tipo] one
It's hard to presume without getting a chance to look at your code, but it sounds like when you do a redirect after validation you have something like
return redirect()->back()->withInput(); which causes fields to be prepopulated with the values entered earlier on the page. Remove withInput() portion in your controller if you have this.
Otherwise please mind posting your code in addition to your question, that would be helpful. (the controller part with the redirection and the view where you have the dropdown)
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 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.