Trying to add jQuery validation without submit() button

Question

Below is my code. What I want to do is add validation so when the user clicks off an input field the validation message "name required" shows up. However at the minute it is just below the input field and is there all the time. Thank you

$(document).ready(function(){ 
  if($('#firstname').val() == ''){
    $('.errorMsg').show();
  } else{ 
    $('.errorMsg').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="First name"     maxlength="15"  <span class="errorMsg">Name required </span>
</input>

If this is for a real-world application, I would also advise against that maxlength-attribute. People tend to have more interesting names than most webdevelopers can imagine — Oliver Baumann
– Oliver Baumann, Commented Oct 20, 2017 at 16:04
@OliverBaumann But if the database only accepts 15, then it can cause some trouble. But I agree that 15 characters is a but low for a first name. — Ivar
– Ivar, Commented Oct 20, 2017 at 16:06
@Ivar, if a database only accepts 15 varchars, talk to the database admin ;-) honestly, that's not an argument. No offense meant, obviously! — Oliver Baumann
– Oliver Baumann, Commented Oct 20, 2017 at 22:09
@OliverBaumann Non taken. Only saying that using maxlength is not a bad thing per se. No matter how much you accept in the database, there is a limit somewhere. — Ivar
– Ivar, Commented Oct 20, 2017 at 22:13

Oliver Baumann · Accepted Answer · 2017-10-20 15:57:59Z

1

Use CSS to initially hide the error-message. You also have invalid HTML: the error-message span can't be nested in the input.

Working solution:

$(document).ready(function(){ 
  $('#firstname').on('blur', function() {
      if($(this).val() === '') {
        $('.errorMsg').show();
      } else {
        $('.errorMsg').hide();
      }
  });
});

.errorMsg {
    display: none;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="First name" 
 maxlength="15"/>
 <span class="errorMsg">Name required </span>

answered Oct 20, 2017 at 15:57

Oliver Baumann

2,2881 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivar · Accepted Answer · 2017-10-20 15:47:55Z

0

You can use the blur event for that:

$(document).ready(function() {
    $('#firstname').on('blur', function() {
        if ($('#firstname').val() == '') {
            $('.errorMsg').show();
        } else {
            $('.errorMsg').hide();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="First name" 
   maxlength="15">  <span class="errorMsg" style="display: none;">Name required </span>
</input>

answered Oct 20, 2017 at 15:47

Ivar

6,97912 gold badges58 silver badges69 bronze badges

Comments

Rafael Oliveira · Accepted Answer · 2017-10-20 15:54:50Z

0

Use blur event, which can be called directly from the found element using jQuery

$(document).ready(function(){

    $('.errorMsg').hide();

    $('#firstname').blur(function(){
    if($('#firstname').val() == ''){
        $('.errorMsg').show();
    }
        else{ 
            $('.errorMsg').hide();
        }

    });


});

Here's a JSFiddle

answered Oct 20, 2017 at 15:54

Rafael Oliveira

2781 silver badge17 bronze badges

Comments

jboutin · Accepted Answer · 2017-10-20 17:10:46Z

0

jQuery Blur - Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

Try (JSFiddle)

var firstNameInput = $('input#firstname'),
    errorMsgEl = $('.errorMsg');

// Bind blur on the input for 'first name'
firstNameInput.bind('blur', function () {
    // Check if input is blank
    if(firstNameInput.val() == '') {
        // Ensure error isn't already displayed
        if (errorMsgEl.length == 0) $("<div class='errorMsg'>Name required</div>").insertAfter(this);
    } else {
        errorMsgEl.remove();
    }
});

answered Oct 20, 2017 at 17:10

jboutin

1

Collectives™ on Stack Overflow

Trying to add jQuery validation without submit() button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related