Display Message only upon validation using jQuery

Question

I am trying to make a message appear on the viewport only once all text areas are filled. Right now myMessage appears immediately upon clicking the button on my page even though the first name field has yet to be validated. How do I make the myMessage ONLY appear once the form element for "First Name" is filled out by the user?

$(document).ready(function() {
  $("#submitinfo").click(function() {
    var myFirstName = $("#first_name").val().trim();
    if (!myFirstName) {
      $("#first_error").html("You must Enter a First Name");
      $('#first_name').focus();
    } else {
      $("#first_error").html("");
    }
    $("#message").css('background-color', 'red');
    var myMessage = "Your name is " + myFirstName;
    $("#message").html(myMessage);
    return false;
  });

});

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name"> <span class="error" id="first_error"></span>
<input type="button" id="submitinfo" value="Submit">
<span class="message" id="message"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Move the code of the message inside the else block

Sanchit Patiyal
– Sanchit Patiyal

2017-10-29 20:55:58 +00:00
Commented Oct 29, 2017 at 20:55 — Sanchit Patiyal
– Sanchit Patiyal, Commented Oct 29, 2017 at 20:55

Flynamic · Accepted Answer · 2017-10-29 20:57:32Z

1

Put your myMessage code inside the else block. You'd also want to remove the content of #message if !myFirstName is true.

answered Oct 29, 2017 at 20:57

Flynamic

981 silver badge8 bronze badges

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

Comments

Sanchit Patiyal · Accepted Answer · 2017-10-29 21:00:50Z

1

Currently, you are displaying message whenever user clicks the button instead of that display only when user enters something in input field by moving the message block in else part like this

$(document).ready(function() {
  $("#submitinfo").click(function() {
    var myFirstName = $("#first_name").val().trim();
    if (!myFirstName) {
      $("#first_error").html("You must Enter a First Name");
      $('#first_name').focus();
      $("#message").html("");
    } else {
      $("#first_error").html("");
    $("#message").css('background-color', 'red');
    var myMessage = "Your name is " + myFirstName;
    $("#message").html(myMessage);
    }
    
    return false;
  });

});

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name"> <span class="error" id="first_error"></span>
<input type="button" id="submitinfo" value="Submit">
<span class="message" id="message"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

answered Oct 29, 2017 at 21:00

Sanchit Patiyal

4,9301 gold badge16 silver badges31 bronze badges

3 Comments

TRS7 Over a year ago

where do I put the myMessage code if I have multiple validation fields (IE. If I also had a Last Name Validation Field)? Would I paste the myMessage code in both "else" blocks? Thank you.

Sanchit Patiyal Over a year ago

If you want to display specific messages like your first name, your last name then yes you should :)

TRS7 Over a year ago

Thank you for your help Sanchit, I appreciate it.

Collectives™ on Stack Overflow

Display Message only upon validation using jQuery

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related