I am trying to achieve AutoFocus functionality on the first empty form field which can be an input element or any kind i.e.
1. textbox
2. radio button
3. Select
4. checkbox
I have had a look at the jquery website and tried using the :input selector
but I am unable to achieve Autofocus on any input field other than text box.
I have also setup a JS Fiddle,
Fiddle for code
Can somebody help here?
You might need to use filter() to find the inputs with empty values:
$(function () {
$("input:enabled").filter(function () {
return this.value.trim() == "";
}).first().focus();
});
This will not work if you are using checkbox. So for that:
$(function () {
$("input:enabled").filter(function () {
if ($(this).attr("type") == "checkbox" || $(this).attr("type") == "radio")
return $(this).val().trim() == "" || !this.checked;
else
return this.value.trim() == "";
}).first().focus();
});
Fiddle: http://jsfiddle.net/7fwrd2rk/
You need to filter() out the empty/unchecked inputs and set focus to the first element in the matched set, as below.
$(function () {
$("input:enabled").filter(function () {
return this.type.match(/checkbox|radio/i) && //when it's a checkbox/radio
!this.checked || //get me a list of unselected ones
($.trim(this.value) === ""); // else get me a list of empty inputs
}).first().focus(); //grab the first from the list and set focus
});
Here is a demo along the same lines.
This includes textarea and select.
Related
I have a survey with two questions on the page (one that is multiple choice) and one that is a text entry question.
I want to hide the next button until the text entry question has been filled out but I've only been able to hide the next button indefinitely and it seems to not reappear after the text field has been filled in.
Qualtrics.SurveyEngine.addOnload(function()
{
this.hideNextButton();
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {hideNextButton ()} else {showNextButton ()}
});
});
});
You have some syntax errors. It looks like you are trying to use jQuery instead of Prototypejs. Besides that, you need to restrict your input element search to the question and there is only one input field so you only need one function. Try this (edited to defer initial next button hide):
Qualtrics.SurveyEngine.addOnload(function() {
function hideEl(element) {
element.hide();
}
var nb = $('NextButton');
hideEl.defer(nb);
$(this.questionId).down('.InputText').on('keyup', function(event) {
if(this.value.length == 0) nb.hide();
else nb.show();
});
});
I have a form which is split up into sections using pagination on each tag. (See Fiddle)
I however have required fields in each section, I'd like to validate it so that fields with the "required" attribute must not be blank before the user moves on to the next section.
http://jsfiddle.net/Azxjt/
I've tried to following but don't think I'm on the right tracks:
$(this).closest("article > :input").each(function() {
if($(this).val == null) {
con = 0;
}
});
if ( con == 0 ) {
alert("All fields must be filled in");
}
else {
}
Your help is appreciated :)
Text input will return a black value if no response has been entered. Try the following
In jQuery, the value is returned by val()
$(this).val() == ""
You could possibly enhance your jQuery selector to test only those input elements with a corresponding required label.
Use each function.
var isEmpty;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isEmpty= true;
}
});
I have two inputs where I am checking to make sure that they are not empty before the form submits.
My issue is that it only validates #from_date. Is the issue that .val will only check the last id in the list?
$('#submitDates').click(function () {
// Get the fields you want to validate
var name = $("#to_date, #from_date");
// Check if field is empty or not
if (name.val()=='') {
alert ('Please Select Dates')
return false;
} ;
});
});
Any specific reason you're hooking on .click and not .submit?
You can iterate through the selected elements and check for a violating element using .each
var found = false;
$("#to_date, #from_date").each(function(i,name){
// Check if field is empty or not
if (!found && $(name).val()=='') {
alert ('Please Select Dates')
found = true;
} ;
});
return !found;
In your example var name = $("#to_date, #from_date"); is giving you a collection of two inputs and by doing if (name.val()=='') jQuery is checking only the first element in the collection, so it's not working. You may try this
$('#submitDates').click(function () {
var name = $("#to_date, #from_date");
if ( name[0].value == '' || name[1].value == '' ) {
alert ('Please Select Dates');
return false;
}
});
In the above example name[0].value refers to the first element and name[1].value refers to the second element. If you want to use jQuery's val() method then you can use it like $(name[0]).val() and $(name[1]).val().
Also you should consider to use submit event of the form instead of button's click event.
I have a few select menus that include blank options. When both are blank (usually on the first page load), I would like to show some hidden div.
This is what I have:
$('.variant_options select').each(function() {
if ($(this).attr('value') === '') {
// some code here to show hidden div
console.log("No options chosen");
}
});
This doesn't seem to work.
Edit 1
For what it's worth, I have tried something like this:
if (!$(this).attr('value'))
And that has seemed to work, but it breaks functionality elsewhere.
<select> elements don't have a value attribute, so you need to use .val() on the element to find out if the currently selected option is empty.
if ($(this).val() === '') {
// value of select box is empty
}
this.value === '' should also work
To check whether no options are selected:
if (this.selectedIndex == 0) {
// no option is selected
}
You can do so by using the following:
if($(this).val() === '') {
// value is empty
}
I believe also the following too:
if(!$(this).prop('value')) {
// It's empty
}
You can simply do this:
$('.variant_options select').each(function () {
if ($.trim($(this).val()) === '') {
// some code here...
}
});
jQuery can check for value by using $(this).val()
So you would do if ($(this).val === '')`
If you wanted to check for some other attribute, like href or src, you could do
if ($(this).attr('href') === ''
In case if you have spaces, use this trick:
if ($.trim($(this).val()) === '') { ...
I have a div which contain lots of input[type=text] fields. I want to put a check that user must have fill all the fields otherwise show error message. For this i tried :
if ($('div').children("input[type=text]").attr("value") == '')
flag = false;
else
flag = true;
But this will not check all the text field, it only checks the first-child . How can i check all the text field ?
Try to use find() instead
if ($('div').find("input[type=text]").val() == '')
To check over all input items you need to iterate over them using each().
Correct code would be:
$(function() {
$('input:submit').click(function(){
var flag = true;
$('div').find("input[type=text]").each(function(){
if($(this).val() === '') flag = false
});
alert(flag);
});
});
See demo on jsFiddle.
This code return true if all input[type=text] fields inside div are filled and false if at least one is empty.
The standard way
if(!$('div').find('#idOfTextField').val()){
//empty
}
if($("div").find('input:text[value=""]').length > 0)
{
alert("error");
return false;
}