Focus on first visible and empty select/dropdown using jQuery - javascript

I do some validation for the required fields and then I want to focus on the first visible textarea or textbox or select.
The the following code, works fine for textarea and textbox but not for select. How can I make a check for an empty select in the following jquery statement. Any help would be appreciated.
$("textarea:empty:visible,input[value='']:visible,select option[value='']:visible").first().focus();
Here is the jsFiddle.

You can use .filter()
$("textarea:empty:visible,input[value='']:visible,select").filter(function () {
if ($(this).is('select')) {
if (this.value === "") {
return true;
} else {
return false;
}
} else {
return true;
}
}).first().focus();
Demo -----> http://jsfiddle.net/zUw36/8/

Related

jQuery - Validation

I'm having an issue with my validation process. I'm not using a standard "submit" button, rather I have <span class="button" id="print">Print</span> and jQuery listens for a click. This is the validation code I have when that "button" is clicked:
var validation = "";
function validate() {
$("#servDetails").find("input").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
$("#checklist").find("input[required]").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
}
$("#print").on("click", function() {
validate();
if (validation == false) {
alert("Please fill out all required inputs!");
return false;
}
else {
window.print();
}
});
If I click the button without filling anything out (all items blank), I get my alert as expected.
If I fill out all of the required elements, it pulls up the print dialouge as expected.
However, if I leave some of the boxes blank while others are correctly filled, it still goes to print instead of giving me the alert like I need. Any thoughts?
The code have to be rewritten, or better replace it with any validation plug-in.
But in your case, I suppose, you just forgot to return, in case you found some not filled field. So if you have any filled input it override your validation variable.
The simplest solution is to remove
else {validation = true;} code blocks, and add
validation = true;
at the beggining of the function.

Autofocus on the first empty field in the form

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.

JQuery MultiPage form.. validation on each step

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;
}
});

Highlight empty select box after alert

I have a site using input:text, select and select multiple elements that generate a text output on button click.
Having searched SO, I found examples of validation code that will alert the user when a select field returns an empty value-
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
$(this).addClass("highlight");
}
At the end, I tried to add a condition after the alert is dismissed, such that the offending select box will be highlighted by adding the 'highlight' class - but this doesn't do anything. My .highlight css is {border: 1px red solid;}
Any help here?
UPDATED WITH ANSWER - Thanks #Adam Rackis
This code works perfectly. I added a line to remove any added '.highlight' class for selects that did not cause an error after fixing
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
$('select').removeClass("highlight");//added this to clear formatting when fixed after alert
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
You were close. In your loop, this does not refer to each select that you're checking.
Also, you're returning false prior to the highlight class being added. You'll probably want to keep track of whether any select's are invalid, and return false at the very end after you're done with all validation.
Finally, consider moving your alert to the very bottom, so your user won't see multiple alerts.
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}
}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
Also, since you're already using jQuery, why not take advantage of its features a bit more:
$('select').each(function(i, sel){
if (sel.value === '') {
$(el).addClass("highlight");
anyInvalid = true;
}
});
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}

How do I disable input field when certain select list value is picked

How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}
The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}
If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/

Categories