I have an accordion in react-bootstrap and a form with validation in it. Some form fields are on the first page of the accordion and some are on the second page. Upon validation error how can I expand the accordion page that contains the first invalid field?
I managed to get the first invalid form field, but I am unable to determine which accordion page contains this field.
If you have the first invalid form field then you can use closest to find it's accordion card via the class 'collapse'.
Add 'show' to its classes so it will open then you can scroll to the invalid element via scrollIntoView
handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
let firstInvalidFieldInTheForm = form.querySelectorAll(':invalid')[0];
let ancestorAccordion = firstInvalidFieldInTheForm.closest(".collapse");
ancestorAccordion.classList.add("show")
firstInvalidFieldInTheForm.scrollIntoView();
event.preventDefault();
event.stopPropagation();
}else{
this.handleSaveButtonClick();
}
this.setState({validated: true});
};
Related
Here is my situation:
I have a very long multi-page survey built by webforms in drupal.
The questions are not required but we don't want the users to skip all the questions too easy by just clicking Next Page button.
So this is what we need:
When the user try to click on "Next Page" button with any empty fields on the page, error or warning messages will show up, "Are you sure you want to skip this question?", as well as a skip button next to it. When the user click on the skip button, the message disappears and they click on the next page button to proceed the survey.
Here are my thoughts on this:
I used webform validation module to create an Not Empty validation and apply it to the fields.
in webform_validation_validators.inc:
case 'skip_if_empty':
foreach ($items as $key => $val) {
if (count($val) == 0) {
drupal_set_message(t('This field is empty.'), 'warning');
// do something, not sure about it here
}
}
Another thought:
I used the Dismiss module to display an X button next to the error message.
Can I add some functions to the X button to bypass the validation when it is clicked?
And here is the script for the Dismiss module, :
(function ($) {
Drupal.behaviors.dismiss = {
attach: function (context) {
$('.messages').each(function () {
var flag = $(this).children().hasClass('dismiss');
if (!flag) {
$(this).prepend('' + Drupal.t('Close this message.') + '');
}
});
$('.dismiss').click(function () {
$(this).parent().hide('fast');
// some functions to bypass validation to the field?
});
}
}
})(jQuery);
I don't know what to do to after the //. Or is there any other ideas that will work?
AS per the you requirement mention
Take this example
You have created webform having field like
Firstname with required field
Lastname with required field
Then Next button button
When user click next button then error show because you have make the fields are required
When your showing "Dismiss button" next to each field.
Whenr user click "Dismiss button" that time you have to remove "required" attribute of field using jquery or drupal ajax
After that when user click next button then user not get any kind of required field validation error.
I have used Ajax.BeginForm / Html.BeginForm for a view which sends an object to the controller on clicking submit. There are some telerik controls which are disabled conditionally. On clicking submit, the object is unable to retrieve the already existing value in the control since it is disabled. Hence object is made with null values. Any help?
Im using jquery to disable these telerik controls on loading the page.
Change.setDropDownValues = function () {
if (condition) {
$("#A").data('tDropDownList').enabled = false; $("#A").data('tDropDownList').disable();
}
}
else if (condition) {
$('#Pop').attr('disabled', 'disabled'); //text box
$('#ShortDesc').attr('disabled', 'disabled'); //textarea
$('#LongDesc').attr('disabled', 'disabled'); //text area
$('#Cont').attr('disabled', 'disabled'); //text box
$('#iDate').attr('disabled', 'disabled'); //datepicker division
$('#C').data('tDropDownList').enabled = false; //drop down list
$('#C').data('tDropDownList').disable();
}
};
Can anyone say how to remodify so that I can fetch the disabled field values?
That's how disabled inputs work. They never send the value to the server. You could use readonly instead if you want to prevent the user from modifying the value and yet send the old value to the server when the form is submitted.
you can use something like this
$(":disabled", $('#yourform')).removeAttr("disabled");
before submit.
I know how to grab the index, but that doesn't appear to be what I need to post into the tab itself.
This is a continuation, but different question, from my previous post: Submiting jQuery form results back into dynamic tab
My tab form is submitting now with 100% success, internal to my jQuery validate, but I want my reply to appear in the tab it came from.
At the end of my jQuery validation I have:
submitHandler: function(form) {
var thisTab = $tabs.tabs('option', 'selected'); // what index are we?
var options = {
target: '#thisTab',
};
$(form).ajaxSubmit(options);
return false;
}
It's close, but what I'm doing is actually grabbing the index of the selected tab, this does not appear to be what I need for the ajaxSubmit to post into.
As I understand you want to set target to thisTab, but you are setting target as a jQuery selection string #thisTab,
this means target is the element with id "thisTab".
From Jquery Form Plugin API
target
Identifies the element(s) in the page to be updated with the
server response. This value may be specified as a jQuery selection
string, a jQuery object, or a DOM element. Default value: null
So you should set thisTab as the target.
Update : The main problem is that you are trying to set tab as target element, you should set the selectedPanel as target.
submitHandler: function(form) {
var thisPanel = $tabs.tabs('option', 'selectedPanel'); // what index are we?
var options = {
target: thisPanel,
};
$(form).ajaxSubmit(options);
return false;
}
Hum, maybe I wasn't clear and I'm not explaining it.
What I want is for the output of update.cfm to be shown in the same dynamic tab body that held the details I just updated. I tried what you suggested and all it does when I hit submit is blink. It does submit, I can use firebug to see the post and response, but the response is not shown. So I do want the tab as the target.
What you did do however is show me a new term "selectedPanel" that I did not know, and that lead me to this post which I had not seen before: How to get the selected tab panel element in Jquery UI Tabs?
And that led me to make the following change:
submitHandler: function(form) {
var selectedPanel = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)");
var options = {
target: selectedPanel
};
$(form).ajaxSubmit(options);
return false;
}
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.
In the jqgrid, when i click the first column value, i want to open as iFRAME window. if i use showlink or link formatter, its posted and redirect to the another page. how to create first column value as iframe window.
Thanks in avance..
One method is to use a link to the same page in your format options:
formatoptions: {baseLinkUrl: '#', showAction: '', addParam: ''}
Then after the grid is rendered - for example, in the loadComplete event - set up a click event handler for when a link is clicked:
jQuery('.ui-jqgrid-btable a', '#container').each(function()
{
jQuery(this).unbind('click');
jQuery(this).click(function(){
var link = jQuery(this).attr('href');
var equalPosition = link.indexOf('='); // Get the position of '='
var id = link.substring(equalPosition + 1); // Split the string and get the number.
// Your iframe code here...
return true;
});
This code simply parses out the link, gets the ID, and then lets to do whatever you want with that ID . So for example, you could load content into a new iFrame.
#container is optional, but you could use this as a div that contains the jqGrid div, if you have multiple grids on the same page and need to differentiate them.