Validation message wont appear when using onclick event

user_6015096 0
Viewed 68

Below is my code for a simple jQuery validation. However I want the validation to appear if the field is left empty and the add task button is clicked. At the minute it appears all the time. This form is to add a to do item to a list so will be blank once loaded 

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#title').val() == '') {
      $(this).next('.errorMsg').show();
    } else {
      $(this).next('.errorMsg').hide();
    }
  });
});

$(document).ready(function() {
  $("#todo").hide(); //hide form until create new task button is clicked 
});

$(document).ready(function() {
  $("#new").on('click', function() {
   $("#todo").toggle();
  $("#new").hide();
  });
});

$(document).ready(function() {
  $("#AddTask").click(function() {
    $("#todo").slideUp("slow", function() {
      // Animation complete.
    });
  $("#new").show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="title" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>

html jquery javascript
4 Answers

$(this).next will look for the next element after the button where as your error message is before the button. Instead useclassIdentifier and you need to hide the message initially.

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#title').val() == '') {
      $('.errorMsg').show();
    } else {
      $('.errorMsg').hide();
    }
  });
});
.errorMsg{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="title" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>

P.S. Instead of next if you have used prev it would have worked but I'll suggest going with classIdentifier only there is no need of prev for this particular code

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#title').val() == '') {
      $(this).prev('.errorMsg').show();
    } else {
      $(this).prev('.errorMsg').hide();
    }
  });
});
.errorMsg{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="title" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>

user_59018480

Instead of using $(this).next simply use $('your-error-class).show().html('error you want to show');

Secondly you are using $(this).next() wrong.

It will look for the next element after the button to be your error class which is not actually present there.

user_74169310

You need to hide the .errorMsg first using css display: none; , also use $(".errorMsg") selector.

I have also updated the id for input since you are using the label for same. 

$(document).ready(function() {
  $('#AddTask').on('click', function() {
    if ($('#exampleFormControlInput1').val() === '') {
      $('.errorMsg').show();
    } else {
      $('.errorMsg').hide();
    }
  });
});
.errorMsg{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="exampleFormControlInput1">Title of Task</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Title">
<span class="errorMsg">Title of task required </span>

<button type="required" id="AddTask">Add Task</button>

user_39504220

For detect if input is empty or not better use length like this:

if ($('#title').val().length <= 0) {
  $(this).prev('.errorMsg').show();
} else {
  $(this).prev('.errorMsg').hide();
}

JSFiddle

user_45401830
Related