CODEWITHSUNDEEP
jqueryvalidation
VK Chikkadamalla
VK Chikkadamalla

Reputation: 239

How to display the error message

When I click the button I want to validate the fields and if there are any errors, I want to show user error message on top.

I am validating but I am not able to show the error message. Where exactly is the problem?.

$(document).on('click', '#button', function() {
  var FirstName = $('#fName').val();
  alert(FirstName);
  var LastName = $('#lName').val();


  if (FirstName.val() == '') {
    $("#error").append("Please enter First Name");
  } else if (LastName.val() == '') {
    $("#error").append("Please enter Last Name");
  }
});
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button" onclick="dtlsSubmit()">SUBMIT</a>
</div>

Upvotes: 0

Views: 718

Answers (3)

mplungjan
mplungjan

Reputation: 178403

Here is my suggestion - remove the inline click and put it in the validation

function dtlsSubmit() {
  // here you can send the data
}
$(document).on('click', '#button', function(e) {
  e.preventDefault(); // cancel click
  var FirstName = $('#fName').val();
  var LastName = $('#lName').val();
  var error = "";
  if ($.trim(FirstName) == '') {
    error += "Please enter First Name<br/>";
  } 
  if ($.trim(LastName) == '') {
    error += "Please enter Last Name<br/>";
  }
  $("#error").html(error); // empty if no error
  if (error=="") {
    dtlsSubmit();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button">SUBMIT</a>
</div>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

The main issue is because you set the Firstname and Lastname variables to the string values of the elements, then in the if conditions you attempt to again call val() on what is now a string, which will error as that method doesn't exist.

If there are no errors encountered (ie. all fields have a value) you can then call your dtlsSubmit() method from the jQuery event handler, like this:

$(document).on('click', '#button', function(e) {
  e.preventDefault(); // stop the link being followed
  var $error = $('#error').empty(); // remove any errors added on the previous click
  var error = false;
  
  if ($('#fName').val() == '') {
    error = true;
    $error.append("<p>Please enter First Name</p>");
  } 
  
  if ($('#lName').val() == '') {
    error = true;
    $error.append("<p>Please enter Last Name</p>");
  }

  if (!error) 
    dtlsSubmit();
});

function dtlsSubmit() {
    console.log('dtlsSubmit...');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button">SUBMIT</a>
</div>

Note that I amended the logic flow slightly so that all errors are shown on click of the a, instead of the first one encountered. This enables the user to know about all problems immediately and fix them without having to repeatedly click the button to find the next error.

Upvotes: 0

guradio
guradio

Reputation: 15565

$(document).on('click', '#button', function() {
  var FirstName = $('#fName').val();
  var LastName = $('#lName').val();


  if (FirstName == '') {//remove .val()
    $("#fnameerror").show();
  } else if (LastName == '') {//remove .val()
    $("#lnameerror").show();
  }
});
.error{
  
  display:none
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <span id='fnameerror' class='error'>Please eneter First Name</span>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <span id='lnameerror' class='error'>Please eneter Last Name</span>
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="#" data-role="button" id="button" ">SUBMIT</a>
</div>

Add a span with error message then show if match the condition

Upvotes: 1

Related Questions