Develop Reference

Enable submit button only when no error is found

I have a simple application in which I only want to enable the calculate button only when no-errors are found (an error is recorded if the value is not a number, or a value is less than 0). I perform a few conditional checks using && and || operator. However, when only one input has been filled properly, without errors, the button is enabled. But, when an explicit wrong value has been specified the button is disabled again.
Code: https://github.com/KaustubhMaladkar/Tip-Calculator
if (!peopleError && !billError) {
submit.removeAttribute("disabled");
}
if (billError || peopleError) submit.setAttribute("disabled", "")
Live site: https://kaustubhmaladkar.github.io/Tip-Calculator/

I would like to thank that #Nestoro for their comments on my question as most, if not all, of my answer is based their comments.
This code will solve the problem
if (!peopleError && !billError && Number(billElem.value) && Number(peopleElem.value)) submit.removeAttribute("disabled");
else submit.setAttribute("disabled", "");

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

Why does this jQuery input value checker not work?

I need to check all the inputs to see if they are filled, in which case the submit button would become pressable and the user can submit their data safely:
unfilled = false;
$('.add-field').keypress(function(){
$('.add-field').each(function(){
if($(this).val() === ''){
unfilled = true;
} else {
unfilled = false;
}
})
console.log(unfilled);
});
This code works, but it has a strange twist; as the last empty input gains a character, it still returns true. If an input gains another character, only then it will return false. I am confused by this, as I understand that the .each() function is fired after a character has been added and the value of the input has been updated. Consequently, I do not see why it does not register that value.

You should set unfilled to false before entering the loop (but INSIDE the keyup).
In the loop you should only set unfilled to true when a field is emty and not set it to false again, otherwise you'll only know if the last field is filled in.

You could use filter and use keyup event instead for del keys:
DEMO
$('.add-field').keyup(function () {
var unfilled = !! $('.add-field').filter(function () {
return $.trim(this.value) === ""
}).length;
console.log(unfilled);
});

Here === means it is matching exactly the data types:
if($(this).val() === ''){
Replace it with == :
if($(this).val() == ''){

As far as I know, this is an 'issue' when using the KeyPress-event, because the Browser's UI Thread did not update the input field's value yet. Therefore the value currently is still 'empty' and thus true is returned; you can either use the KeyUp-event or try something like this: JavaScript keypress event get end value of textarea

javascript validation - ignore default field value

trying to ignore the default value (used a field hint for accessibility) of a field when the form is going
through it's validation.
The validation is in javascript:
if (giftCardNumber >= 'xxxxxxxxxxxxxxx' && giftCardNumber <= 'xxxxxxxxxxxxxxxxx' ) {
giftAlert (incdpy_msg_065,"frmGCD_"+formIndex+"_Number");
if ((typeof TeaLeaf != "undefined") && (typeof TeaLeaf.Client != "undefined") && (typeof TeaLeaf.Client.tlAddEvent != "undefined") ) { // Tealeaf Include
var nVO = { ErrorMessage :incdpy_msg_065}
var subtype="CustomErrorMsg";
TeaLeaf.Event.tlAddCustomEvent(subtype, nVO);
}
return false;
}
I assume it's a fairly simple line - if(giftCardnumber === "Enter gift card")...
xxx's are for security reasons.
Or can I just clear all default values on focus and on submit?

You can just check against the defaultValue property:
if (element.value == element.defaultValue) {
// it has its default value
} else {
// it has some value other than its default
}
The usual way is to use onfocus and if value == defaultValue, set the value to '' (empty string). Then onblur, do the opposite (i.e. if value == '', set to defaultValue).

Yes - if you know what the default value is, and can validate against it, this is the most straightforward way of doing it.

You basically need to test for that value yes. Then it depends if you want to prevent the form from being submitted or send an empty value to the server.
Did you try that and encounter a problem ?
edit:
As you say clearing the values on focus would be nice (for the user) but not sufficient since the user can still submit the form without 'touching' the field. In the submit you can just do
if(giftCardNumber === "default value") {
giftCardNumberField.value = "";
}
Provided you have access to the field this will simply send an empty value to the server. This will also have the annoying habit of leaving the field blank (ugly if the page does not get submitted because the form was invalid or because you do it through ajax).
Actually I don't know what's the best practice for this. Looking at the ext docs I see that their Textfield will just submit its empty text if given an html name.

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