I currently have a working function that checks if all of the forms fields are not blank. For part of a form, i have a hidden div that will appear if one of the fields has an answer of yes selected in the drop down. when i have the drop down item selected as yes, i would like for the function to check if any one of those fields are left empty, and when the drop down has an answer of no, i don't want the function to check the values of the hidden div items. i can't seem to figure out a way to accomplish this. this is what i have tried so far. the variable label2 contains the value of the drop down menu, Yes/No.
function validateOverage()
{
var drive2 = document.forms["overage"]["drivers2"].value;
var prodes2 = document.forms["overage"]["proddes2"].value;
var sizes2 = document.forms["overage"]["size2"].value;
var cases2 = document.forms["overage"]["cs2"].value;
var bottle2 = document.forms["overage"]["btls2"].value;
var initials2 = document.forms["overage"]["chkitls2"].value;
var label2 = document.forms["overage"]["ontrucks"].value;
var routenum2 = document.forms["overage"]["routenum"].value;
var stopnum2 = document.forms["overage"]["stopnum"].value;
var custnum2 = document.forms["overage"]["custnum"].value;
if (drive2 == null || drive2 == "" || prodes2 == null || prodes2 == "" || sizes2 == null || sizes2 == "" || cases2 == null || cases2 == ""||
bottle2 == null || bottle2 == "" || initials2 == null || initials2 == "" || label2 == null || label2 == "")
{
alert("Fill in all Fields for the Overage form");
return false;
}
else if (label2 == "Yes" || routenum2 == null || routenum2 == "" || stopnum2 == null || stopnum2 == "" || custnum2 == null || custnum2 == "")
{
alert("Fille in all Fields for the Overage form");
return false;
}*/
else if (cases2 == "0" && bottle2 == "0")
{
alert("Both cases and bottles values can not be 0");
return false;
}
else
{
alert("Data Added to the Overage form");
}
}
html code that i have in my body that has the hidden contents
<td style = "visibility: hidden"><input type = "number" id = "routenum"> </input></td>
<td style = "visibility: hidden"><input type = "number" id = "stopnum"> </input></td>
<td style = "visibility: hidden"><input type = "number" id = "custnum"> </input></td>
Related
Here is my html code
<input type="button" name="Button" value=" Next " runat="server" id="btnNext" class="button" onclick ="if (!EmptyCheck()) return false;" />
and
function EmptyCheck() {
debugger;
var txtRSI = $("input[id$=txtRSI]").val();
var txtQFix = $("input[id$=txtQFix]").val();
var txtPassPercent = $("input[id$=txtPassPercent]").val();
var txtDefRejRate = $("input[id$=txtDefRejRate]").val();
var txtBuildVar = $("input[id$=txtBuildVar]").val();
var txtEffortVar = $("input[id$=txtEffortVar]").val();
var txtScheVar = $("input[id$=txtScheVar]").val();
var txtDeliMet = $("input[id$=txtDeliMet]").val();
var txtBudgetVar = $("input[id$=txtBudgetVar]").val();
var ddlOwner = $('select[id$="ddlOwner"]').val();
var ddlAccount = $('select[id$="ddlAccount"]').val();
var ddlProgramme = $('select[id$="ddlProgramme"]').val();
var ddlMonth = $('select[id$="ddlMonth"]').val();
var ddlYear = $('select[id$="ddlYear"]').val();
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") ||
(txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1")
|| (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
}
else {
return true;
}
}
This is javascript method works fine in my browser.whereas the same is not working for others.
couldnt find why this happens..
inline code is not supported in chrome..i saw this in several posts..but it works for me..but not for others.. can somebody give an alternate solution to this???
also i have server side implememnted...wanted to achieve both.
i have tried like this also
getelementbyid('btnid').addeventlistener('click', function()){}
Have you tried just using the function? If your function returns a boolean value, why are you checking it to then return another boolean value? Just return EmptyCheck()
However, I will say that using the inline functions in my experience has been a poor decision. The functions can be managed/called more efficiently from an external jscript file. Here's an example:
Step 1
In your .js file, create a generic (but not anonymous) function for each page. For examples, we'll work in a hypothetical "Home" page.
function HomePageEvents() {
}
Step 2
Now we have a function that will serve as a container for your home page's javascript . . . But of course we need to run the function at some point. Well, we want to make sure the function is run once the document is finished loading of course, since we'll likely need to reference elements of the rendered page. So let's go ahead and create an anonymous function that will trigger this container function (aka, HomePageEvents() function). In your Home page, add the following:
<script type="text/javascript">
$(document).ready({function(){
HomePageEvents();
});
</script>
Step 3
What was it we were trying to do again? Oh, right! We want to add a click event for your button. Well, we can first start by creating the function for the click event. Now, I'm assuming your button has some kind of innate functionality, and all we are doing here is validating the button. If this is indeed the case, all we need to do is return a true or false indicating whether the event should continue.
function HomePageEvents() {
// Function to perform our validation.
function validateNext() {
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
} else {
return true;
}
};
};
Step 4
Now that we have the validation function ready, we just need to add the function as a click event for our btnNext button.
function HomePageEvents() {
// Add function to btnNext button . . .
$('#btnNext').on('click', function(){
validateNext();
});
// Function to perform our validation.
function validateNext() {
if ((txtRSI == "") || (txtQFix == "") || (txtPassPercent == "") || (txtDefRejRate == "") || (txtBuildVar == "") || (txtEffortVar == "") || (txtScheVar == "") || (txtDeliMet == "") || (txtBudgetVar == "") || (ddlOwner == "-1") || (ddlAccount == null) || (ddlProgramme == null) || (ddlMonth == 0) || (ddlAccount == "-1") || (ddlProgramme == "-1") || (ddlYear == 0)) {
alert("All fields are Mandatory");
return false;
} else {
return true;
}
};
};
The end result is you get (1) all your javascript in a single file--which is better for caching, (2) the file is easily manageable, and (3) you can isolate code for each page.
As an alternate you can use jQuery click event. Read documentation from here .
$('.button').click(function(){ // button is the class name of your input control
// Your EmptyCheck Logic goes here.
});
Note that there are other solutions as well to bind click event using jQuery like .on().
$('.button').on('click', function() {
// Your EmptyCheck Logic goes here.
});
Hope this helps!
I am trying to ask the user to input at least 1 of the options. From my codes the user need to input all the inputs. Can anyone please check what is wrong with my code?
jsp
<form role="form" method="POST" id="search" action="Servlet"
onsubmit="return validateForm();">
<label>Name</label>
<input name="name">
<label>ID</label>
<input name="id">
<label>no</label>
<input name="no">
<button type="submit">Search</button>
</form>
javascript
function validateForm() {
var name = document.forms["search"]["name"].value;
var id = document.forms["search"]["id"].value;
var no = document.forms["search"]["no"].value;
if ( (name == null || name == "") || (id == null || id == "") || (no == null && no == "")) {
alert("Please enter either one to perform search");
return false;
}
}
Just a little logic adjustment should do the trick:
if (
(name != null || name != "") ||
(id != null || id != "") ||
(no != null && no != "")
) {
This is saying that if any one of the fields has a value, continue.
function validateForm() {
var name = document.forms["search"]["name"].value;
var id = document.forms["search"]["id"].value;
var no = document.forms["search"]["no"].value;
if ( (name == null || name == "") && (id == null || id == "") && (no == null || no == "")) {
alert("Please enter either one to perform search");
return false;
}
}
or you would do it as #isherwood did. also take care of typos like not closing your input tag
should goes like this <input name="no"/> good luck and I hope this would help
I have drop-down and text-box in a gridview and I am trying to check if the selected value of a drop-down is set to "No" and no comments is entered in the text-box then i want to show message. The requirement should be as long as the selected value of the drop down is set to No then comments must be entered in the text-box. My issue is that i am getting the message even if the drop-down is set to Yes or comments is provided when the drop down is set to No. Here is the code:
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var ddl = gridView.rows[i].getElementsByTagName('Select');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (ddl != null && ddl.length > 1 && ddl[0] != null && areas != null && areas.length > 1 && areas[0] != null) {
if (areas[0].type == "textarea" && ddl[0].type == "select-one") {
var txtval = areas[0].value;
var txtddl = ddl[0].value;
if (txtddl.value == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
alert('Please note that comments is required if drop down is set to No. Thanks');
areas[i].focus();
}
return flag;
}
</script>
You can do like this:
<script>
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
}
}
}
}
if (!flag) {
alert('Please enter comments. Thanks');
}
return flag;
}
</script>
Try this:
$('#select').on('change', function () {
var text = $(this).find(":selected").text();
var textBox = $(this).parent().filter('input [name="InputName"]');
if(text == "no" && textBox.val() =="")
{
\\display your message
}
});
I programmed this to check my form data, however, it does not work. First I check all the values, if they are null, then I check if email adress is valid and then I check if the checkbox is checked.
When I submit the form with no values on input, it successfully loads the document specified in action="#", which should not happen because of the return false;.
function validateForm() {
var meno = document.forms["registracia"]["meno"].value;
var priezvisko = document.forms["registracia"]["priezvisko"].value;
var telefon = document.forms["registracia"]["telefon"].value;
var email = document.forms["registracia"]["email"].value;
var vek = document.forms["registracia"]["vek"].value;
var praca = document.forms["registracia"]["praca"].value;
var motto = document.forms["registracia"]["motto"].value;
var osoba = document.forms["registracia"]["osoba"].value;
if (meno == null || meno =="" || priezvisko == null || priezvisko =="" ||
telefon == null || telefon =="" || email == null || email =="" ||
vek == null || vek =="" || praca == null || praca =="" ||
motto == null || motto =="" || osoba == null || osoba =="" ||) {
alert("Musíte vyplniť všetky údaje.");
return false;
}
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(email)) {
alert("Zadajte platnú e-mailovú adresu.");
return false;
}
if(!document.forms["registracia"]["suhlas"].checked) {
alert("Musíte súhlasiť s uverejnením vašej fotografie.");
return false;
}
}
You had an extra || at the end of your if condition. You can also make it a bit more readable, see below.
function validateForm() {
var form = document.forms["registracia"];
if ( !form.meno.value
|| !form.priezvisko.value
|| !form.telefon.value
|| !form.email.value
|| !form.vek.value
|| !form.praca.value
|| !form.motto.value
|| !form.osoba.value ) {
alert("Musíte vyplniť všetky údaje.");
return false;
}
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(form.email.value)) {
alert("Zadajte platnú e-mailovú adresu.");
return false;
}
if( !form.suhlas.checked ) {
alert("Musíte súhlasiť s uverejnením vašej fotografie.");
return false;
}
}
I have a javascript alert on my form here - http://investing.uglyopportunities.com/opportunity/ I have the javascript function working correctly for my form. Except I also want the javascript to alert when the user doesn't select from either of the two drop down menus. I really don't have much experience at all with javascript, so keep that in mind! Here is my current code. I really appreciate any help
<script type="text/javascript">// <![CDATA[
function validateForm() {
var a = document.forms["myform"]["inf_field_FirstName"].value;
var b = document.forms["myform"]["inf_field_Email"].value;
var c = document.forms["myform"]["inf_field_Phone1"].value;
var e = document.forms["myform"]["inf_field_City"].value;
var f = document.forms["myform"]["inf_field_State"].value;
var g = document.forms["myform"]["inf_field_PostalCode"].value;
if (a == null || a == "" || a == "First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
if (e == null || e == '' ||e == "City") {
alert("Please insert your city");
return false;
}
if (f == null || f == '' || f == "State") {
alert("Please insert your state ");
return false;
}
if (g == null || g == '' ||g == "Postal Code" || c.length < 5) {
alert("Please insert your postal code");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
// ]]>
</script>
if(document.getElementById('inf_custom_LevelofInterest').value == '' || document.getElementById('inf_custom_Doyouhavemoneytoinvest').value == ''){
alert('please select ...');
return false;
}