Form validation empty field when checkbox is checked - javascript

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.

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

How to reload page after script on Javascript?

I'm a newbee in javascript and i need to refresh page when script is done:
<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["Hostname"].value;
if (x == "" || x == null) {
alert("Name must be filled out");
return document.location.reload(true);
}
}
</script>
But i don't understand how to make it work.
try it
window.location.reload(true);
<script type="text/javascript">
function validateForm() {
var x = document.forms["myForm"]["Hostname"].value;
if (x == "" || x == null) {
alert("Please specify a FQDN of your host");
window.location.reload(true);
return false;
</script>
This one works fine. Thanks to all

Get Value From Dynamic textarea

In the given code i have create a dynamic textarea, now when i try to get insert value from that textarea. It gives me null value.
<form name="myForm">
<textarea name="fname" <%#!((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).Code.Equals("OTH", StringComparison.InvariantCultureIgnoreCase) ? "style='display: none;'" : string.Empty%> id="text<%#((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).ID%>" maxlength="50" placeholder="Enter other item details"></textarea>
</form>
Given is my function to get value from textarea box:
function ValidateData() {
if ($("textarea").is(":visible")) {
//var x = document.forms["myForm"]["fname"].value;
var x = document.getElementsByName("fname").value;
if (x == null || x == "") {
alert("Please Enter Other Item Details");
return false;
}
}
else return true
}
Your textarea was dynamic so you can used textarea change event. You can use given code on load, so whenever you input text it sets on OtherItemValue:
var OtherItemValue;
$("textarea").on('input change keyup', function () {
if (this.value.length) {
OtherItemValue = this.value;
} else {
OtherItemValue = "";
}
});
And then you can used below code:
function ValidateData() {
if ($("textarea").is(":visible")) {
if (OtherItemValue == null || OtherItemValue == "") {
alert("Please Enter Other Item Details");
return false;
}
}
else return true
}
Since you are using jQuery already, why don't you use it to achieve the desired result?
Your code would look like this:
function ValidateData() {
if ($("textarea").is(":visible")) {
var x = $("textarea").val();
if (x == null || x == "") {
alert("Please Enter Other Item Details");
return false;
}
}
return true
}
If you really need to use standard library, #Rachit Gupta's answer should solve the problem.
<form name="myForm">
<textarea name="fname" <%#!((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).Code.Equals("OTH", StringComparison.InvariantCultureIgnoreCase) ? "style='display: none;'" : string.Empty%> id="text<%#((GPNS.BusinessLayer.SpecialItems.SpecialItem)Container.DataItem).ID%>" maxlength="50" placeholder="Enter other item details"></textarea>
</form>
Your function should now look like this
function ValidateData() {
if ($("textarea").is(":visible")) {
//var x = document.forms["myForm"]["fname"].value;
var x = document.getElementsByName("fname")[0].value;
if (x == null || x == "") {
alert("Please Enter Other Item Details");
return false;
}
}
else return true
}
The problem with your code is that getElementsByName will get a list of elements, which don't have a value property. You need to get only a particular element and get its value. This solution may solve your problem, but will work if you don't have any other element with name as fname above the textarea.
Use jquery .val() method to retrieve the value of the text area.
you need to initialise textarea to empty at document ready function.
$(document).ready(function(){
$("textarea[name='fname']").val("");
});
function ValidateData() {
if ($("textarea").is(":visible")) {
var x = $("textarea[name='fname']").val();
if (x == null || x == "") {
alert("In if " + x);
return false;
}
else {
alert("In else" + x);
}
}
else {
return true
}
}

js syntax passing name elements form validation

I just need help on how to pass multiple 'name' elements in my function that validates a form submission.
I have this and works fine.
var x = document.forms["myForm"]["FirstName"].value;
if (x == null || x == "")
{
alert("asdf");
return false;
}
tried this but didnt work.
var x = document.forms["myForm"]["FirstName"+"LastName"].value;
if (x == null || x == "")
{
alert("asdf");
return false;
}
Any help with the syntax on how to do so would be appreciated.
What you are trying makes no sense.
var x=document.forms["myForm"]["FirstName"+"LastName"].value;
would get the value from an element called FirstNameLasteName.
So you probably meant this:
var x=document.forms["myForm"]["FirstName"].value + document.forms["myForm"]["LastName"].value;
You meant this:
var x=document.forms["myForm"]["FirstName"].value + " " +
document.forms["myForm"]["LastName"].value;
if (x==null || x=="")
{
alert("asdf");
return false;
}

How to use javascript validating two text areas

The below works, how would i go about including a 2nd "txtArea2"? I've tried joining a & (document.getElementById("txtArea2").value == '') but doesnt work. I'm new to js syntax if someone could help.
if(document.getElementById("txtArea1").value == '')
{
alert("debug");
document.getElementById("txtArea1").style.display ="none";
return false;
};
I'm not sure if I understand your question correctly but you probably want to compare them with || (OR) operator, so if txtArea1 or txtArea2 is empty then the validation shall not pass. That means both textareas will be required fields.
if (document.getElementById("txtArea1").value == '' || document.getElementById("txtArea2").value == '')
{
alert("debug");
document.getElementById("txtArea1").style.display ="none";
return false;
};
Double && specifies the AND condition.
if (document.getElementById("txtArea1").value == '' && document.getElementById("txtArea2").value == '')
If you want to treat both separately, you'll have to use two separate if statements as well. (I outsourced the textareas into variables for readability)
var txtarea1 = document.getElementById("txtArea1");
var txtarea2 = document.getElementById("txtArea2");
if(txtarea1.value == '')
{
alert("debug");
txtarea1.style.display = "none";
return false;
};
if(txtarea2.value == '')
{
alert("debug");
txtarea2.style.display = "none";
return false;
};
If you want to do one thing if either of them (1 or 2) is empty, try this:
if(txtarea1.value == '' || txtarea2.value == '')
{
alert("debug");
txtarea1.style.display ="none";
txtarea2.style.display ="none";
return false;
};
var t1 = document.getElementById("txtArea1").value;
var t2 = document.getElementById("txtArea2").value;
if( t1 == '' || t2 == '')
{
alert("debug");
document.getElementById("txtArea1").style.display ="none";
return false;
};

Categories