Javascript - checking if multiple fields are empty not working

Question

HTML form look:

<form action="search" id="searchForm" onsubmit="return validateSearch()">
    <input type="text" name="byTitle" pattern="[a-zA-Z0-9]+" placeholder="Enter a word from title">
    <input type="text" name="byAuthor" pattern="[a-zA-Z]+\s[a-zA-Z]+" placeholder="First-name Last-name"> <!--  pattern="\w+ \w+" -->
    <input id="startDate" name="startDate" type="date">
    <input id="endDate" name="endDate" type="date">
    <input type="submit" name="submit" value="Submit">
</form>

Javscript validating function:

function validateSearch() {

    var byTitle   = document.getElementById('searchForm').byTitle.value;
    // alert(byTitle);
    var byAuthor  = document.getElementById('searchForm').byAuthor.value;
    // alert(byAuthor);
    var startDate = document.getElementById('searchForm').startDate.value;
    //alert(startDate);
    var endDate   = document.getElementById('searchForm').endDate.value;
    //alert(endDate);       

    if(byTitle == byAuthor == startDate == endDate == ""){
        alert("Enter at least one search parameter!");
        return false;
    }
}

Now, if I leave all form fields empty/unfilled and press submit, alert("Enter at least one search parameter!"); message should pop-up, but it doesn't. Wanted to see what are the values of each field I have inserted alert after each field reading, and they are all same, empty string/blank. So, why is then that if condition not seeing them as same, empty fields?

score 8 · Accepted Answer · answered Jan 15 '14 at 10:39

8

Your issue is here:

wrong

if(byTitle == byAuthor == startDate == endDate == ""){

correct

if(byTitle === "" && byAuthor ==="" && startDate ==="" && endDate === ""){

Javascript has a simpler way to evaluate if a value is null, empty string or 0 by only evaluating the variable:

if(!byTitle  && !byAuthor && !startDate && !endDate ){

Another advise I wanted to share is to use "===" instead of "==".

answered Jan 15 '14 at 10:39

Dalorzo

19,834
7
55
102

You don't have to use `===` here instead of `==`. There's no reason you'd want to ensure those values are strings. Also your description of the chunk you took from [my answer](http://stackoverflow.com/a/21134955/1317805) is incorrect. The `!` operator doesn't evaluate if a value is null, empty string, or 0, it converts the value to boolean then returns the opposite. – James Donnelly Jan 15 '14 at 11:03
1

+1, never knew that `!byTitle` would also check for empty string – freefaller Jan 15 '14 at 11:07
http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons – Dalorzo Jan 15 '14 at 12:53
The link above quotes Douglas Crockford saying "My advice is to never use the evil twins. Instead, always use === and !==. " – Dalorzo Jan 15 '14 at 12:56
And for last your advice omitted that if the user types 0 it will evaluate as false when it is actually different than "" – Dalorzo Jan 15 '14 at 13:04

James Donnelly · Answer 2 · 2014-01-15T10:34:41.627

3

"" is falsy, so you can simply use:

if (!byTitle && !byAuthor && !startDate && !endDate) {
    ...
}

This uses the logical NOT operator on your variables (!) to convert them to boolean values, then return the opposite.

JSFiddle demo.

edited Jan 15 '14 at 10:34

answered Jan 15 '14 at 10:29

James Donnelly

126,410
34
208
218

score 1 · Answer 3 · answered Jan 15 '14 at 10:36

1

maybe you can like this;

$(function(){
    var bytitle = $("input[name=byTitle]").val();
    var byAuthor = $("input[name=byAuthor]").val();
    var startDate = $("input[name=startDate]").val();
    var endDate = $("input[name=endDate]").val();

    if( bytitle == '' && byAuthor == '' && startDate == '' && endDate == '')
        alert("Enter at least one search parameter!");
});

answered Jan 15 '14 at 10:36

Onur Sevik

75
1
8

jQuery isn't tagged in this question, nor is it mentioned. – James Donnelly Jan 15 '14 at 10:36

score 0 · Answer 4 · answered Jan 15 '14 at 10:33

You can use AND in your condition :

byTitle = "";
byAuthor = "";
startDate =""; 
endDate = ""
if(byTitle == "" && byAuthor =="" && startDate =="" && endDate == ""){
        alert("Enter at least one search parameter!");
        return false;
    }

http://jsfiddle.net/tCJ95/

score 0 · Answer 5 · edited Jan 15 '14 at 11:04

0

Try this:

var ee = byTitle = byAuthor = startDate = endDate="";
if(ee=="null" || ee.length==0 || !ee)
{
    alert("all fields must be filled out");
    return false;
}

edited Jan 15 '14 at 11:04

psxls

6,807
6
30
50

answered Jan 15 '14 at 10:45

Favouronu

55
1
12

Javascript - checking if multiple fields are empty not working

5 Answers5