CODEWITHSUNDEEP
javascripthtmljqueryformsvalidation
The Masta
The Masta

Reputation: 857

Check if input value is empty and display an alert

How is it possible to display an alert with jQuery if I click the submit button and the value of the input field is empty?

<input type="text" id="myMessage" name="shoutbox_msg" size="16" class="field_nosize" maxlength="150">&nbsp;
<input id="submit" type="submit" name="submit_post" class="button_nosize" value="Senden" onclick="sendMessage(); clearInput();">

Upvotes: 21

Views: 299127

Answers (6)

Chinmay Hegde
Chinmay Hegde

Reputation: 1

Use this instead because just trying to check if the value is not equal to an empty string won't help if there are multiple spaces.

('#submit').onclick = function(){
    let count = 0;
    let notEmpty = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
        
    for(let i=0; i < $('#myMessage').value.length; i ++){

        for(let j = 0; j < notEmpty.length ; j++){
    
                    if($('#myMessage').value[i]== notEmpty[j]){
                            count += 1;
                    }
            }
    }

    if(count==0){
    
        alert("You cannot leave this blank");
    }

}

Upvotes: 0

Cheruiyot A Kirui
Cheruiyot A Kirui

Reputation: 147

You could create a function that checks every input in an input class like below

 function validateForm() {
  
    var anyFieldIsEmpty = jQuery(".myclass").filter(function () {
        return $.trim(this.value).length === 0;
    }).length > 0

    if (anyFieldIsEmpty) {
        alert("Fill all the necessary fields");
        var empty = $(".myclass").filter(function () {
            return $.trim(this.value).length === 0;
        })
        empty.css("border", "1px solid red");
        return false;
    } else {
        return true;
    }
}

What this does is it checks every input in 'myclass' and if empty it gives alert and colour the border of the input and user will recognize which input is not filled.

Upvotes: 0

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

Check empty input with removing space(if user enter space) from input using trim 

$(document).ready(function(){     
       $('#button').click(function(){
            if($.trim($('#fname').val()) == '')
           {
               $('#fname').css("border-color", "red");
               alert("Empty"); 
           }
     });
});

Upvotes: 0

Shiv Yadav
Shiv Yadav

Reputation: 161

Also you can try this, if you want to focus on same text after error.

If you wants to show this error message in a paragraph then you can use this one:

 $(document).ready(function () {
    $("#submit").click(function () {
        if($('#selBooks').val() === '') {
            $("#Paragraph_id").text("Please select a book and then proceed.").show();
            $('#selBooks').focus();
            return false;
        }
    });
 });

Upvotes: 3

Zigri2612
Zigri2612

Reputation: 2310

Better one is here.

$('#submit').click(function()
{
    if( !$('#myMessage').val() ) {
       alert('warning');
    }
});

And you don't necessarily need .length or see if its >0 since an empty string evaluates to false anyway but if you'd like to for readability purposes:

$('#submit').on('click',function()
{
    if( $('#myMessage').val().length === 0 ) {
        alert('warning');
    }
});

If you're sure it will always operate on a textfield element then you can just use this.value.

$('#submit').click(function()
{
      if( !document.getElementById('myMessage').value ) {
          alert('warning');
      }
});

Also you should take note that $('input:text') grabs multiple elements, specify a context or use the this keyword if you just want a reference to a lone element ( provided theres one textfield in the context's descendants/children ).

Upvotes: 13

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

$('#submit').click(function(){
   if($('#myMessage').val() == ''){
      alert('Input can not be left blank');
   }
});

Update

If you don't want whitespace also u can remove them using jQuery.trim()

Description: Remove the whitespace from the beginning and end of a string.

$('#submit').click(function(){
   if($.trim($('#myMessage').val()) == ''){
      alert('Input can not be left blank');
   }
});

Upvotes: 83

Related Questions