Make dropdown mandatory - javascript

I have a drop-down generated by a backoffice. I cannot change how this drop-down is coded by the backoffice. But I need to make user selection mandatory for this dropdown.
I am using the following code and this works in the JSFIDDLE HERE. However, this code sees if the user chooses another value than value "A" to determine if a selection is made. But this in not good enough in my situation because this value indication changes in other drop-downs.
I need the code to see if the user choice has changed from the text "PLEASE SELECT - $0,00" The "- $0,00" may also vary in different drop-downs, so I need the code to only filter on the "PLEASE SELECT" part of the drop-down text.
Also I need the browser to not ask to turn these warnings off in this case.
Can anyone help please?
function selection()
{
var cat = document.getElementById('select').value;
if (cat == "A") {
alert('Please make a selection');
return false;
}
return true;
}

Alert whatever text you want in a span instead of using alert()
document.getElementById('alert').innerHTML = "Please make a selection";
Check the updated fiddle

So there is couple of questions in your question, lets start with
1) Ensuring the selected item does not start with "PLEASE SELECT".
function selection()
{
var sel = document.getElementById('select');
var selectedText = sel.options[sel.selectedIndex].text;
if (selectedText.startsWith("PLEASE SELECT")) {
alert('Please make a selection');
return false;
}
return true;
}
2) Stopping the user forcing the browser to no longer allow alert
This is not something you can control. If you want full control over a model dialog then there are plenty of these available - bootstrap has one, jQueryUI has one. Any UI framework you're using will almost certainly have one

You can try something like:
function selection()
{
var cat = $('#select option:selected').val();
if (cat == $('#select option:first-child').val()) {
alert('Please make a selection');
return false;
}
return true;
}
For the warnings you will need to change you alert to a modal or on the page as a notice/warning message

Related

Highlight dropdown value for a mandatory field

I have a field called Block material which needs to be a mandatory field, so i wrote a condition to notify user to select the value from dropdown. I would like to highlight this field when it gives an alert. How do i do this? The below code doesnt work for dropdown but works for a text field.
var blockMaterial = document.getElementById("BLOCK_MATERIAL");
if (blockMaterial.value == "") {
$("#STATUSDIVID").removeAttr('class').addClass('div-error').html("Please select an option from the Block Material dropdown");
$("#testingDynoForm #BLOCK_MATERIAL").css("background-color","#F6CED8");
$(window).scrollTop(0);
}
Try
if(blockMaterial.options[blockMaterial.selectedIndex].value == "") {
// your code
}

Javascript validation bug

Please imagine this part of a web form. Two checkboxes (with the same name="myCheckbox") and two text inputs. If the first checkbox is checked, the first text input must not be empty. If the second checkbox is checked, the second text input must not be empty. To validate this I use the script below:
// huge validation code above
}else if (!document.myForm.myCheckbox[0].checked && !document.myForm.myCheckbox[1].checked){
jAlert ('Please select one of the two checkboxes!',function(){$(myForm.myCheckbox).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value=="") {
jAlert ('You have selected the first checkbox. Please make sure that the first text input is not empty!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[1].checked && myForm.mySecondTextInput.value=="") {
jAlert ('You have selected the second checkbox. Please make sure that the second text input is not empty!',function(){$(myForm.mySecondTextInput).focus();});
return false;
// huge validation code below
Everything works just fine. But now, I also want to check if in the first text input the user has entered at least 10 digits. I update my validation code, please see below:
// huge validation code above
}else if (!document.myForm.myCheckbox[0].checked && !document.myForm.myCheckbox[1].checked){
jAlert ('Please select one of the two checkboxes!',function(){$(myForm.myCheckbox).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value=="") {
jAlert ('You have selected the first checkbox. Please make sure that the first text input is not empty!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value!=="")
var x = document.getElementById("myFirstTextInput");
var y = x.value;
var totalNrOfDigits = 0;
for(var i = 0; i < y.length; i++){
if(/\d/.test(y[i])){
totalNrOfDigits++;
}
}
if(totalNrOfDigits < 10) {
jAlert ('Please make sure that the first text input contains at least 10 digits!',function(){$(myForm.myFirstTextInput).focus();});
return false;
}else if (myForm.myCheckbox[1].checked && myForm.mySecondTextInput.value=="") {
jAlert ('You have selected the second checkbox. Please make sure that the second text input is not empty!',function(){$(myForm.mySecondTextInput).focus();});
return false;
// huge validation code below
My problem: after I add the check for at least 10 digits, if the users clicks the SECOND check box, then "mySecondTextInput" is no longer validated and the form is submitted. I really don't get it why and already wasted most of may day...
Sorry because I have not added the whole code: It's really huge, it's a pretty complex web form.
In the second code example, you forgot the opening curly bracket on line 11, so only the first statement following the else if condition will be evaluated.
}else if (myForm.myCheckbox[0].checked && myForm.myFirstTextInput.value!=="")
^
|

Jquery effect on form select

I have a script thats validating some form information. Currently it adds a CSS class of .error (adds red border) and also applies the shake effect when the input value is seen to be less than 1 character.
I also need to do this on various selects in the form if nothing has been selected. What would I need to do with the following code to get this to work please?
//check if inputs aren't empty
var fields = $('.validate');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
I have limited Javascript / Jquery knowledge and this is a modified script I found online. You can see it in action here: site, step 2 of the form is where you can find the selects.
you can check if a selection was made by checking if there is an option selected :
if ($("#mySelect option:selected").length){
//something has been selected
}
if (!$("#mySelect option:selected").length){
//nothing has been selected
}
You can use this jQuery validation plugin instead it will make ur life way easier specially with errors and error displaying..
http://jqueryvalidation.org/

How can I tell if the checkboxes are checked?

I need to be able to tell if the checkboxes are checked to do some basic validation. Problem: I don't have access to the PHP generating this. There is no class added, or the basic checked=checked that most forms have. What's the easiest way to target the checked boxes?
http://www.inpresence.in/event-registration?ee=4
EDIT: freak out!! here's the code, i just need to target the checked boxes, everything else is working. the :checked method of jquery uses checked=checked within the checkbox, which isn't there.
$(document).ready(function(){
//when the submit button is clicked...
$("input.btn_event_form_submit").click(function(){
//find the value of the drop down with one evening or four evenings
var priceOption = $("#price_option-4").val();
//match a string ending with "one evening" as the first numbers will be randomly generated by php
var oneEvening = /^\d{2}\|One Evening$/.test(priceOption);
//match a string ending with "four evenings" as the first numbers will be randomly generated by php
var fourEvenings = /^\d{2}\|Four Evenings$/.test(priceOption);
//HOW DO I GET THE CHECKED BOXES?!
var checkedBoxCount = $('#dates-1351733097 .valid').is(':checked').length;
//if one evening is selected make sure the checked boxes count does in fact equal one
if(oneEvening && checkedBoxCount != 1){
//if it doesn't alert the user and return false
alert('You must select one date');
return false;
}
//if one evening isn't selected, four is. make sure the count does indeed in 4
else if (fourEvenings && checkedBoxCount != 4){
//if it doesnt alert the user and return to the form
alert('You must select four dates');
return false;
}
//else, everything checks out!
else {
return;
}
});
});
Using this JavaScript code you can check if a checkbox is checked:
var isChecked = document.getElementById("my-checkbox").checked;
Or using jQuery:
var isChecked = $('#my-checkbox').is(':checked');
EDIT: Try this and tell me if it works:
var checkedBoxCount = $('#dates-1351733097 .valid:checked').length;
Have you tried using jquery to resolve this?
http://jquery-howto.blogspot.co.uk/2008/12/how-to-check-if-checkbox-is-checked.html
$('#edit-checkbox-id').is(':checked');
use the jquery :checked selector. http://api.jquery.com/checked-selector/
This will give you a boolean in javascript of what you want:
document.getElementById("Nov.12-4_1").checked
You can view source and find the elements to view whatever id's they have.
Other answers: the OP didn't specify that he wanted a jquery answer. If he hasn't used jquery for anything up to this point. I think adding it just for this would be a tad overkill.

How do I use JavaScript to create a text box mask?

I am very new to JavaScript. I want to add the same effect as that given in the text fields of this webpage in my own page... Can any one help me with how to do it or where to learn it from.
I want my text fields to show what have to be written there but it will change as soon as I write something in it..
Another thing is that a small popup block will appear when I click on a textbox which describes what and how to write in it... like password should be alpha numeric... or more than 6 character long ect.
If you want to do this in an accessible way (and you should):
If JS is available, position a transparent input over a label inside a container and toggle the transparency of the input based on its value at document load time and whenever the focus enters of leaves the element.
I've produced a minimal example.
As for the second part of the question. That's very similar. Just have another label beside the input, and toggle its visibility when the focus enters or leaves, ignoring the value of the input. I wouldn't bother with this though, advance notice of requirements is nice!
You might want to take a look at the WMD markdown editor:
http://wmd-editor.com/
This does exactly what you're looking for.
Look at jquery:
$('#textarea').onKeyup(
function(){
$('div#mydiv').innerHTML( $(this).val() );
}
);
Thats a start. :)
HTML Input field
<input type="text" name="name" id="name" value="" />
Javascript
function hint () {
var elem = document.getElementById('name'); // get element
elem.value = "Enter Name"; // fill element with value
elem.onfocus = function () { // if the user focuses
if (elem.value === "Enter Name") { // if there is default text
elem.value = ""; // clear it
}
}
elem.onblur = function () { // if user removes focus on field
if (elem.value === "") { // if the field is empty
elem.value= "Enter Name"; // fill in a default value
}
}
}
window.onload = hint; // call the function when the page has loaded

Categories