Develop Reference

jQuery - Simple validation for two inputs

I have two inputs: the first one is X - file upload. the second one is Y- an input for an URL.
So far I have a code that checks if Y is valid then remove the attribute required for X. otherwise I want the X to be required.
$(Y).blur(function(){
if ($(this).is(':valid') == true) {
$(X).removeAttr('required')
} else if ($(this).is(':valid') == false) {
$(X).attr('required');
}
});
for some reason this code works when the input Y is valid it removes the attribute. But let's say the user regrets and wants to leave Y blank, it doesn't return the required attribute for X.
Tried to keep the explanation as simple and clear as possible. If there is a misunderstanding I'll try to edit this question and make it clearer.

The easiest way is:
$(Y).blur(function(){
if ($(this).is(':valid') == true && $(this).val() != '') {
$(X).removeAttr('required')
} else if ($(this).is(':valid') == false || $(this).val() == '') {
$(X).attr('required');
}
});
In that case when user removes the content, required attribute will be returned back (dont forget to add trim function, I didnt use it in the sample).
I would recommend to capsulate this logic into validation functions. I also dont like blur event (usability is bad), I would recommend onchange event for field validation.

Javascript validation of Adobe form (radio buttons)

I'm having difficulty (I'm new to JavaScript) figuring out a little validation in Adobe LiveCycle forms. I have a first choice (4 option) radio button, 2nd choice (same 4 options) and 3rd choice (same 4 options) where I'd like a validation to make sure the user doesn't enter the same result 3 times.
I thought it would be something like:
event.rc = true;
if ( form1.#subform[0].FirstChoice.rawValue != form1.#subform[0].SecondChoice.rawValue ! && form1.#subform[0].FirstChoice.rawValue != form1.#subform[0].ThirdChoice.rawValue !)
{
app.alert("You need three separate answers, you dimwit!");
event.rc = false;
}
Evidently, I am being a dimwit and going about this all wrong, but I've drawn a blank.
I was thinking also along the lines of:
form1.#subform[0].FirstChoice.rawValue <> form1.#subform[0].SecondChoice.rawValue ! && form1.#subform[0].FirstChoice.rawValue !<> form1.#subform[0].ThirdChoice.rawValue !)
but I don't know where to go with it.
Help (please), thanks.

You are pretty close. Try:
if ((Select1.rawValue != null && Select1.rawValue == Select2.rawValue) || (Select2.rawValue != null && Select2.rawValue == Select3.rawValue) || (Select3.rawValue != null && Select1.rawValue == Select3.rawValue))
{
app.alert("You need three separate answers, you dimwit!");
}
You need to cover the case where the Selections are not yet filled in. Select1, Select2, and Select3 are the RadioButton group.
I would put this as a calculation on a hidden field since you want it to recalculate whenever a change is made to the radio buttons.

How To Check For Empty Fields In HTML Form With JavaScript

I'm checking a website registration form with JavaScript code and onchange listeners.
Empty fields/spaces need to be checked for first before checking for illegal characters, too long strings, etc.
I've read this.
But for a null string,
if (field.value ==="")
alert("Empty field!");
this will not generate the desired alert.
People at the end of the above thread suggested that recent browser versions might not accept such a statement.
So, how do I sort out empty/blank/ignored fields ?
EDIT 1
I've already tried
if (!field.value)
but it only provides an alert if the user has already typed some characters in the field and immediately deleted them before entering a blank field. It will not provide an alert just by clicking the mouse on it and then tabbing on to the next field. It looks like I may need to assign a null value to these form fields at the outset . . I am using implicit adding of the changeEvent listener, i.e. on seeing a value explicitly assigned to the onchange attribute of an element, it is activated without any addEventListener(..) statement.
Also,
if (field.value.length == 0)
does not seem to produce any alert.
EDIT 2
Sorted, I think.
I was using the JavaScript null field check as part of a field-by-field validation check on a web form.
I was using onchange as the event handler. This was wrong. What was needed here was onblur since in the case of a completely null field (i.e. a field on which nothing had been entered before tabbing away from it), no change has been effected -- and therefore no onchange event occurs that would trigger a JavaScript alert.
Thanks for your efforts.
I was stuck on this one across a couple of weeks and only sorted it with the help of some experimental programming by a more experienced guy at work here.

In this script you can see an alert of your variable value ( a console.log would be lees noisy :)
The use of === is for type check but in your example does not make sense as you are using an empty string
<script>
var field= {};
checkEquality(field);
field.value = "";
checkEquality(field);
function checkEquality(object){
alert(object.value);
if (object.value === "")
{
alert("===");
}
if(object.value == ""){
alert("==");
}
}

You can use bellow code for check all four(4) condition for validation like not null, not blank, not undefined and not zero only use this code (!(!(variable))) in javascript and jquery.
function myFunction() {
var data; //The Values can be like as null, blank, undefined, zero you can test
if(!(!(data)))
{
alert("data "+data);
}
else
{
alert("data is "+data);
}
}

Struts2 page not returning correct value from checkbox

I have a form with various pieces of phone information for two phones, including two checkboxes that correspond to a boolean value in my action class. The below javascript is setting the second check box automatically if the user enters two identical phone numbers.
if(phone1 != '' && phone1==phone2)
{
document.getElementById("phone2Type").value = document.getElementById("phone1Type").value;
document.getElementById("phone2Text").value = document.getElementById("phone1Text").value;
document.getElementById("phone2Text").checked = document.getElementById("phone1Text").checked;
if( phone2Type=='CELL' && document.getElementById('phone2Text') != null)
{
document.getElementById('phone2Text').disabled=true;
}
document.getElementById("phone2Type").disabled=true;
}
And the jspx code to go along with it:
<s:checkbox id="phone1Text"
onclick="javascript:enableTextingBox()" cssClass="phoneText"
name="phoneInfo.phone1.textOptionSelected" fieldValue="true"
value="phoneInfo.phone1.textOptionSelected"
disabled="%{!phoneInfo.phone1.textOptionEnabled || inputFieldDisabled}" />
<s:checkbox id="phone2Text"
onclick="javascript:enableTextingBox()" cssClass="phoneText"
name="phoneInfo.phone2.textOptionSelected" fieldValue="true"
value="phoneInfo.phone2.textOptionSelected"
disabled="%{!phoneInfo.phone2.textOptionEnabled || inputFieldDisabled}" />
The problem I'm seeing is that when I use javascript to set phone2Text equal to phone1Text the corresponding boolean (phoneInfo.phone2.textOptionSelected) is not getting set. I'm confused because the above jspx works correctly when I forget the javascript and check the box manually.
Looking at the parameters being sent in the post method, instead I see this:
_checkbox_phoneInfo.phone2.textOptionSelected: "true"
What I would expect to see is:
phoneInfo.phone2.textOptionSelected: "true"
I'm not sure if this is a Struts2 issue or some javascript peculiarity that I'm not familiar with.

Aleksandr M was exactly right.
This is the line that was causing my issues:
document.getElementById('phone2Text').disabled=true;
Disabling a text box causes its value not to be sent in a POST operation.

Javascript only checks one field

Ok so I've been stumped on this one for days and its frustrating me. (Will frustrate me even more if it's something simple I'm overlooking).
I have a form generated in PHP which I want to verify that certain pieces are filled out. I do this via a JavaScript check when the user clicks the submit button.The JavaScript code is below:
<script language="JavaScript">
function checkFields()
{
if (document.getElementById('ldescription').value == '' || document.getElementById('uname').value == ''
|| document.getElementById('sdescription').value == '' || document.getElementById('email').value == ''
|| document.getElementById('platf').value == "Select Group" || document.getElementByID('cate').value == "Select Category" )
{
alert("Please fill out all of the starred (*) items" );
return false;
}
}
</script>
For some reason though this only checks the ldescription field. If that field has text but all the others are empty it carries on like everything was filled out. Also if I change the order of my checks and ldescription is anywhere but the first check, it will do no check whatsoever even when all the fields are empty.
Any ideas?
EDIT:
Got it fixed. Along with the suggestion I marked as correct the document.getElementById('item').value command worked with only textarea boxes but not regular text input boxes. By changing the command to document.MyForm.myTextName.value everything fell into place.

Couple of problems i noticed with your sample code.
The last getElementById call has improper casing. The final d is capitalized and it shouldn't be
Comparing the value to a string literal should be done by === not ==.
JSLint complains there are line break issues in your if statement by having the line begin with || instead of having the previous line end with ||.
The first and third items are most likely the ones causing your problem.

Inside your if condition, when you are breaking a line, make sure that the last token in the line is the OR operator ||.
Javascript does semicolon insertion, so it may be that semicolons are being inserted (automatically, invisibly, by the interpreter) in a bad place.
Try the below code
<script language="JavaScript">
function checkFields()
{
if (document.getElementById('ldescription').value === '' ||
document.getElementById('uname').value === '' ||
document.getElementById('sdescription').value === '' ||
document.getElementById('email').value === '' ||
document.getElementById('platf').value === "Select Group" ||
document.getElementById('cate').value === "Select Category")
{
alert("Please fill out all of the starred (*) items" );
return false;
}
}
</script>

Please use Javascript && operator which returns true if both the elements are true. || operator evaluates to true in case atleast one of the element is true which is what is happening in your case. You can take a look at Javascript boolean Logic