Checking Input/Type Text is empty/null with jQuery or JavaScript

Question

I'm stumped. I'm trying to check to see if my input type:text is empty, or null, in my JavaScript. I currently have this:

        if ($("#startDate").val().trim().length() === 0)
    {
        alert("Please fill out the required fields.");
    }

I have tried: .val() === "", .val() == "", .length() === 0, .length() == 0, .length() < 1, .val().length() === 0, val().trim().length() < 1, .trim().length() < 1, .text() === "", .text() == "", !$("#startDate").val()

My HTML is:

<fieldset>
<label for="startDate_[pk]" style="display:block; width:100%;text-align:left">Start Time</label>
<input type="text" name="startDate_[pk]" id="startDate_[pk]" style="width:75px;display:inline" placeholder="pick date" />
@@
<select name="startTime_[pk]" id="startTime_[pk]" style="display:inline;" disabled="disabled">
@{
var time = DateTime.Now.Date.AddHours(8);
for (int i = 480; i < 1260; i += 15)
{
<option value="@i">@DateTime.Now.Date.AddMinutes(i).ToShortTimeString()</option>
}
}
</select>
</fieldset>

I have also tried this:

        $('input[class^="dateValidate"]').each(function () {
        if($(this).val().trim().length === 0)
        {
            alert("Please fill out the required fields.");
        }

I'm running out of ideas.

****Update****

The validation works for one selected object. But when you select more than one, the validation only works for the first object. Here's my code:

    function validate()
{
    var startDate = $('[id^="startDate"]').filter(function(){
        return $(this).val().length!==0;
    });
    var showingType = $('[id^="tShowingType"]').filter(function () {
        return $(this).val() === "";
    });
    var startTime = $('[id^="startTime"]').filter(function () {
        return $(this).val() === "";
    });
    var endTime = $('[id^="endTime"]').filter(function () {
        return $(this).val() === "";
    });

    if (startDate.length == 0 || showingType.val() === "" || startTime.val() === "" || endTime.val() === "")
    {
        alert("Please fill out the required fields.");
    }
    else
    {
        UI.goToConfirmStep();
    }

I have tried:

var startDate = $('[id^="startDate"]').filter(function(){
        return $(this).val().length!==0
var startDate = $('[id^="startDate"]').filter(function(){
        return $(this).val().length===0
startDate.length == 0
startDate.length < 0
startDate.length < 1

What's the problem with the one's you've tried? Are they not working? — Matt Zeunert, Jul 06 '15 at 19:50
they aren't hitting the alert. it's just failing with no error. — Kevin Fischer, Jul 06 '15 at 19:50
try this `if($("#startDate").val().trim())` this condition should take care of falsy string (null or undefined or empty) — Sudhansu Choudhary, Jul 06 '15 at 19:50
One thing: `$("#startDate").val().trim().length === 0`, length is not a function, but property. But I guess this is typo since you are saying there are no errors. — dfsq, Jul 06 '15 at 19:51
The selector `$("#startDate")` won't select the element in your HTML that has the `id` of: `startDate_[pk]`; you'd need `$('#startDate_[pk]')`, or simply `$('input[id^=startDate]')`. — David Thomas, Jul 06 '15 at 19:53
it's working on all of my other inputs, this one just happens to be a date picker — Kevin Fischer, Jul 06 '15 at 19:53
the [pk] is loaded up onload, it's a guid that's getting passed out — Kevin Fischer, Jul 06 '15 at 19:54

Amit.rk3 · Accepted Answer · 2015-07-06T20:48:39.600

1

It seems that you have wrong id mapped- startDate in the selector. In your code you have IDs like startDate_[pk]. So you need a starts with selector like below.

 var emptyInputs= $('[id^="startDate"]').filter(function(){
     return $(this).val().length===0;
 });

if(emptyInputs.length>0){
   alert("Please fill out the required fields.");
}

Fiddle Demo

edited Jul 06 '15 at 20:48

answered Jul 06 '15 at 20:07

Amit.rk3

2,417
2
10
16

it hits three times because there are three tags with startDate as part of the name – Kevin Fischer Jul 06 '15 at 20:17
and i can't really change the name at this point, without changing a ton of other code. i think i could try a class and search for that. – Kevin Fischer Jul 06 '15 at 20:18
okay, now it's not working with multiple input fields with different guids attached. Example: I select one and the validation works. but when I select more then one, the validation only works for the first one and not the rest – Kevin Fischer Jul 06 '15 at 20:44
@KevinFischer : updated again. Didn't know this requirement :) – Amit.rk3 Jul 06 '15 at 20:49
honestly, didn't think it would change much! testing it now. I actually adjusted it to emptyInputs.length < 0 in my testing code. i have updated my question up top for more information – Kevin Fischer Jul 06 '15 at 20:51
I have updated the question with something of the things I have tried. It's still validating the first object perfectly (YAY!), but unfortunately, it doesn't validate any of the following objects. – Kevin Fischer Jul 06 '15 at 22:05

AmmarCSE · Answer 2 · 2015-07-06T19:59:30.457

0

You are not targetting the id correctly

if(!$("#startTime_[pk]").val())

if (!$('#startTime_[pk]').val()) {
  console.log('input empty');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id="startTime_[pk]" type="text" value="" />

Update

the [pk] actually changes because it's a guid that gets loaded up on the page load

Then use the starts with selector

if(!$('[id^="startTime"]').val())

edited Jul 06 '15 at 19:59

answered Jul 06 '15 at 19:51

AmmarCSE

30,079
5
45
53

I also tried that one too. Forgot to add that. Will add now – Kevin Fischer Jul 06 '15 at 19:52
@KevinFischer, then it means there is something else going on in your code. I you look at the snippet in my answer, it is working – AmmarCSE Jul 06 '15 at 19:53
@KevinFischer, see my updated answer, you were not targetting the id correctly for the given html – AmmarCSE Jul 06 '15 at 19:55
the [pk] actually changes because it's a guid that gets loaded up on the page load – Kevin Fischer Jul 06 '15 at 19:58
it's not hitting the alert when there's nothing in the input box – Kevin Fischer Jul 06 '15 at 20:03

depperm · Answer 3 · 2015-07-06T20:10:43.823

0

length is not a function. Here is an example of the above code working by removing the parenthesis after length

 function validate() {
   if ($("#tShowingType").val() === "" || ($("#startDate").val().trim().length === 0) || ($("#startTime").val() === "") || ($("#endTime").val() === "")) { 
     alert("Please fill out the required fields."); } else { UI.goToConfirmStep();
    }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type='text' id='startDate' />
<button onclick='validate();' >Button</button>

edited Jul 06 '15 at 20:10

answered Jul 06 '15 at 19:55

depperm

10,606
4
43
67

it didn't hit the alert nor did it hit my else – Kevin Fischer Jul 06 '15 at 19:57
@KevinFischer whats the rest of your jquery – depperm Jul 06 '15 at 20:04
` function validate() { //if ($("#tShowingType").val() === "" || ($("#startDate").val().length === 0) || ($("#startTime").val() === "") || ($("#endTime").val() === "")) if (!$('[id^="startTime"]').val())// || ($("#startTime").val() === "") || ($("#endTime").val() === "")) { alert("Please fill out the required fields."); } else { UI.goToConfirmStep(); } } ` it's a simple function. the ending result will combine those other input fields to create one if statement to validate – Kevin Fischer Jul 06 '15 at 20:05
when is validate called though? – depperm Jul 06 '15 at 20:06
`` – Kevin Fischer Jul 06 '15 at 20:07
there should be a space after button and before onclick – depperm Jul 06 '15 at 20:11
there is. i made a type-o on here and corrected it – Kevin Fischer Jul 06 '15 at 20:14

score 0 · Answer 4 · edited Jul 06 '15 at 21:27

0

Change the condition to the following:

if(!$('[id^="startDate"]').val()){
        alert("Please fill out the required fields.");
    }

edited Jul 06 '15 at 21:27

Luke

11,426
43
60
69

answered Jul 06 '15 at 20:01

Sudhansu Choudhary

3,322
3
19
30

Checking Input/Type Text is empty/null with jQuery or JavaScript

4 Answers4

Linked