Check box validation issue? - javascript

I have the following code to validate if any of three checkboxes are not checked:
function checkBoxes(form) {
if (
form.checkbox1.checked == false ||
form.checkbox2.checked == false ||
form.checkbox3.checked == false)
{
alert ('must fill in the last 3 checkboxes');
return false;
} else {
return true;
}
}
And called once submitted via a submit button:
<form method="post" onsubmit="return checkBoxes(this);">`
It doesn't work, why exactly?

<script type="text/javascript">
function checkBoxes(form) {
if (
form.checkbox1.checked == null ||
form.checkbox2.checked == null ||
form.checkbox3.checked == null)
{
alert ('checkbox is null');
return false;
}
else if (
form.checkbox1.checked == false ||
form.checkbox2.checked == false ||
form.checkbox3.checked == false)
{
alert ('must fill in the last 3 checkboxes');
return false;
} else {
return true;
}
}
</script>
Add that to know if a checkbox is null

Related

Form validation function not executing on click of anchor tag

The code below is meant to validate the first page of a form with JavaScript, before going to the next page.
But when I load the page it only alerts "Organization Name can't be blank'. And goes to the next page, without executing the rest of the function to validate the form. Pls what do I need to adjust next?
The form has 3 pages and users are meant to fill the first page with information in the required format before clicking on the Next which takes the user to page 2. Hence the form validation. The anchor tag acts as the Next button. Thanks!
Next
The form tag:
anchor tag: Next
The function :
function validateForm() {
if (orgname === null || orgname === "") {
alert("Organization Name can't be blank.");
return false;
} else if (msnstatement === null || msnstatement === "") {
alert("Mission can't be blank.");
return false;
}
else if (orgsize == null || orgsize == "") {
alert("Size can't be blank.");
return false;
}
else if (orgview == null || orgview == "") {
alert("Overview can't be blank.");
return false;
} else return true;
}
``
The return statement stops the execution of a function and returns a value.
https://www.w3schools.com/jsref/jsref_return.asp
function validateForm() {
var isValid = true
if (orgname === null || orgname === "") {
alert("Organization Name can't be blank.");
isValid = false
}
if (msnstatement === null || msnstatement === "") {
alert("Mission can't be blank.");
isValid = false;
}
if (orgsize == null || orgsize == "") {
alert("Size can't be blank.");
isValid = false;
}
if (orgview == null || orgview == "") {
alert("Overview can't be blank.");
isValid = false;
}
return isValid;
}

Can't return a boolean to ionViewCanLeave

I have to show my customized alert(designed by modal) when user want to leave current page. It prompt yes or no buttons. If user click yes, I want to return false(ie shouldn't leave the page). If user click no, I want to return true(ie leave the page).
I've tried lots of solutions, but nothing helped me.
ionViewCanLeave(): boolean {
if (this.operationMode == undefined) {
if (this.cycleMode == "AA") {
if (
this.oroficeLevel != this.oroficeLevelInitial ||
this.name != this.nameInitial ||
this.scheduleMode != this.scheduleModeInitial
) {
let modal = this.modalCtrl.create(AlertPage, {
message: "Save Changes?"
});
modal.onDidDismiss(data => {
if (data == "yes") {
return false;
} else {
return true;
}
});
modal.present();
}
} else if (this.cycleMode == "CC") {
if (
this.oroficeLevel != this.oroficeLevelInitial ||
this.name != this.nameInitial ||
this.scheduleMode != this.scheduleModeInitial
) {
let modal = this.modalCtrl.create(AlertPage, {
message: "Save Changes?"
});
modal.onDidDismiss(data => {
if (data == "yes") {
return false;
} else {
return true;
}
});
modal.present();
}
}
}
}

Form validation empty field when checkbox is checked

I'm trying to add validation before form submit. There's an alternative input field, let's call this "Optional" and there's checkboxes "Checkbox1", "Checkbox2", "Checkbox3". When user choose one from this checkboxes, then he must fill input "Optional", if it is empty then he can't submit form and get's some pop-up alert with info to fill this.
I have something like this:
<script>
function validateForm() {
var x = document.forms["form"]["nrumowy"].value;
if (x == null || x == "") {
alert("Numer umowy musi zostać uzupełniony.");
return false;
}
}
</script>
But this input field "nrumowy" must be filled in all situations, so everything okay, and now I want add something similiar but only when one of "Checkbox1", "Checkbox2", "Checkbox3" are checked.
Following code will work instantly while filling the form.
jquery code
<script>
function validateForm() {
var x = document.forms["form"]["nrumowy"].value;
if (x == null || x == "") {
alert("Numer umowy musi zostać uzupełniony.");
return false;
}
var op = document.forms["form"]["optional"].value;
if ($("input[type=checkbox]:checked").length === 0 && op==""){
alert("you must fill Optional field");
return false;
}
}
</script>
If you want to add something similiar but only when one of "Checkbox1", "Checkbox2", "Checkbox3" are checked. Then see if following code helps you.
function validateForm() {
if(document.getElementById("Checkbox1").checked ||
document.getElementById("Checkbox2").checked ||
document.getElementById("Checkbox3").checked ||
{
var x = document.forms["form"]["nrumowy"].value;
if (x == null || x == "") {
alert("Numer umowy musi zostać uzupełniony.");
return false;
}
}
}
You should simply get the values of these checkboxes before that, and if one of them is not checked, exit the function.
function validateForm() {
var frm = document.forms["form"];
if (!frm["Checkbox1"].checked && !frm["Checkbox2"].checked && !frm["Checkbox3"].checked) return;
var x = frm["nrumowy"].value;
if (x == null || x == "") {
alert("Numer umowy musi zostać uzupełniony.");
return false;
}
}
Ok, thanks for your answers, I got now this:
<script>
function validateForm() {
var frm = document.forms["form"];
if (!frm["check_list1"].checked && !frm["check_list2"].checked && !frm["check_list3"].checked) return;
var x = frm["tematyka"].value;
if (x == null || x == "") {
alert("Tematyka artykułu musi zostać uzupełniona.");
return false;
}
}
</script>
<script>
function validateForm2() {
var x2 = document.forms["form"]["nrumowy"].value;
if (x2 == null || x2 == "") {
alert("Numer umowy musi zostać uzupełniony.");
return false;
}
}
</script>
HTML:
<form name="form" method="POST" action="preview.php" onsubmit="return (validateForm() & validateForm2());">
And alerts works, but after user click OK then he goes to preview.php page. When there's only one onsubmit function then this works great, but when I try to combine this two functions then there is a some error.

Validating numeric values using JavaScript

I have the following code. It works fine for blank fields, but it doesn't catch the other numeric exceptions. What am I doing wrong?
function validateForm() {
var a = document.forms["Form"]["percentage"].value;
var b = document.forms["Form"]["minutes"].value;
if (a == null || b == null || a == "" || b == "") {
alert("Please Fill All Required Field");
return false;
} else if (isNan(a) == true || isNan(b) == true) {
alert("Please enter valid numeric values");
return false;
} else if (parseInt(a) > 100) {
alert("Percentage can't exceed 100");
return false;
} else if (parseInt(b) < 0 || parseInt(a) < 0) {
alert("Values can't be negative");
return false;
}
}
Change this line:
else if((isNan(a)==true) ||(isNan(b)==true)){
to this:
else if (isNaN(a) || isNaN(b)) {
as the function is named #isNaN(). Using == true in conditionals is quite redundant, so I removed them.
I have also made a fiddle for you. It contains the fixed code, and it is working well.

add select form validator

i use this code for validate input text and input checkbox . but i want add select box validate to required function . i want user have to select one string and select box fill .
required:{
set:function(val) {
//Check the type of the input
switch(this.tagName) {
case 'INPUT':
if($(this).attr('type') == 'text') {
val = $.trim(val);
if(val === '') {
return false;
}else {
return true;
}
}else if($(this).attr('type') == 'checkbox') {
return $(this).is(':checked') ? true : false;
}
break;
default:
return false;
break;
}
},
message:'This field is required.'
},
but i dont know what and where add code .
else if($(this).attr('type') == 'checkbox') {
return $(this).is(':checked') ? true : false;
}
else if($(this).attr('select') == '') {
if(val === '') {
return false;
}else {
return true;
}
}

Categories