I have a form with 2 steps and with a continue button. At a time one step is visible. I have to validate only visible elements in each step. While using twitter bootstrap, when i go to next step the elements are getting highlighted as soon as the step is visible.
I was searching my own problem but I will try to help you.
I did steps with bootstrapWizard. If step isnt validated not goes and focus on error. My problem is I cant validate wysihtml5 because its hidden and validation ignores it, and hidden:not didnt work on my steps..
That is my on next validation if validated goes to next step.
onNext: function(tab, navigation, index) {
var $valid = $("#form").valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
my validator,
var $validator = $("#form").validate({
});
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 a form with elements that may be contained within collapsed accordion divs. When someone submits the form and the unobtrusive validator catches an error on one or more of these "hidden" form elements, I want the collapsed accordion to open so they can see their errors.
After doing a little research, I found a suggestion here, Using unobtrusive validation in ASP.NET MVC 3, how can I take action when a form is invalid? which says to make my own unobtrusive adapter. So I did, it is here:
$.validator.unobtrusive.adapters.add(
'collapsevalidation',
function () {
var tabs = $('.collapse').not('.in');
//console.log("tabs.length: " + tabs.length);
$(tabs).each(function () {
if ($(this).has('.field-validation-error').length) {
id = "#" + $(this).attr('id');
//console.log("id: " + id);
$("[data-target='" + id + "']").collapse('show');
}
});
}(jQuery));
The adapter plugin has been added to my page and now I am trying to figure out how to "hook" it in but I cannot seem to do so. So far I have added the following to my page:
jQuery.validator.unobtrusive.adapters.add("collapsevalidation");
This however does not seem to be working. When I produce an error on submit, the console.log lines to not write.
I understand that this is a custom adapter because it does not apply to a specific element and does not return anything, like a bool.
Can someone help complete this, please. Thanks!
While I did not find an answer directly to the above, I did get my desired result using the following:
$("form").bind("invalid-form.validate", function () {
//My code here
}
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 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() == "";
});
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.