Automatically reveal or conceal an element based on the entry of a value in an input field, without relying on the keyup() or click events

Question

Automatically reveal or conceal an element based on the entry of a value in an input field, without relying on the keyup() or click events

I have a form field with a Bootstrap Datepicker that populates an <input> tag with a selected date.

<div class="wrapper">
   <div class="form-group">
      <label>Select Date</label>
      <div class="input-group">
        <input name="date_info" type="text" class="form-control datepick validate_date" placeholder="Date" readonly>
      </div>
      <small class="validate_date_error">This field is mandatory!</small>          
      <small class="validate_date_success">This is Fine!</small>
  </div>

  <button class="next">Next</button>
</div>

I want the functionality where clicking the .next button will display .validate_date_error if the date is not selected or empty.

If a date is selected, I want to show .validate_date_success without needing an additional click or the [Enter] key.

Here is my JavaScript code:

$(function() {
    $('.datepick').datepicker({
        autoclose: true,
        format: 'dd-mm-yyyy'
    });
});


$(".next").click( function() {
    var check_date = $(".validate_date").val();

    if( check_date === "" ){
       $(this).parent().find('.validate_date_error').show();
    }else {
       $(this).parent().find('.validate_date_error').hide();
       $(this).parent().find('.validate_date_success').show();
    }
});

If anyone can help me with this, I would greatly appreciate it.

You can view my updated code on JS Fiddle

javascript jquery html css

Answer 1

Answer №1

When you pick a date from the datepicker, you can utilize the onchange event,

$('input[name=date]').change(function() { 
        var selected_date = $(".validate_date").val();
        $('.validate_date_error').hide();
        if(selected_date === ""){
            $('.validate_date_success').hide();
        } else {
            $('.validate_date_success').show();
        }
});

Hopefully, this solution resolves your issue.

Answer 2

When you pick a date from the datepicker, you can utilize the onchange event,

$('input[name=date]').change(function() { 
        var selected_date = $(".validate_date").val();
        $('.validate_date_error').hide();
        if(selected_date === ""){
            $('.validate_date_success').hide();
        } else {
            $('.validate_date_success').show();
        }
});

Hopefully, this solution resolves your issue.

Answer 3

Answer №2

Utilizing the JQuery function change is recommended in this scenario. The function is triggered every time the value in an input field is altered, making it ideal for your requirements.

To implement this, consider assigning an id to your input field, for example:

<input id="date" name="date_info" type="text" class="form-control datepick validate_date" placeholder="Date" readonly>

Next, in your JavaScript file, include the change method:

$('#date').change(function () {
    if($(this).val() !== '') //If a date has been selected
    {
        //display a success message
    }
    else
    {
        //display an error message
    } 
})

Of course, this is a basic example. You can customize the condition to suit your specific needs.

You can access the corresponding fiddle http://jsfiddle.net/zNbUT/750/

I trust this information proves helpful to you.

Answer 4

Utilizing the JQuery function change is recommended in this scenario. The function is triggered every time the value in an input field is altered, making it ideal for your requirements.

To implement this, consider assigning an id to your input field, for example:

<input id="date" name="date_info" type="text" class="form-control datepick validate_date" placeholder="Date" readonly>

Next, in your JavaScript file, include the change method:

$('#date').change(function () {
    if($(this).val() !== '') //If a date has been selected
    {
        //display a success message
    }
    else
    {
        //display an error message
    } 
})

Of course, this is a basic example. You can customize the condition to suit your specific needs.

You can access the corresponding fiddle http://jsfiddle.net/zNbUT/750/

I trust this information proves helpful to you.

Answer 5

Answer №3

Would you like to explore an alternative approach using the .on(event, callback) method?

$(function() {
    $('.datepick').datepicker({
        autoclose: true,
        format: 'dd-mm-yyyy'
    });
});

$("input[name='date']").on('change', function (e) {
    if (e.target.value) {
    $('.validate_date_error').hide();
    $('.validate_date_success').show();
  } else {
    $('.validate_date_error').show();
  }
})

$(".next").click( function() {
            var check_date = $(".validate_date").val();

      if( check_date === "" ){
        $(this).parent().find('.validate_date_error').show();
      }else {
        $(this).parent().find('.validate_date_error').hide();
        $(this).parent().find('.validate_date_success').show();
      }
});

Answer 6

Would you like to explore an alternative approach using the .on(event, callback) method?

$(function() {
    $('.datepick').datepicker({
        autoclose: true,
        format: 'dd-mm-yyyy'
    });
});

$("input[name='date']").on('change', function (e) {
    if (e.target.value) {
    $('.validate_date_error').hide();
    $('.validate_date_success').show();
  } else {
    $('.validate_date_error').show();
  }
})

$(".next").click( function() {
            var check_date = $(".validate_date").val();

      if( check_date === "" ){
        $(this).parent().find('.validate_date_error').show();
      }else {
        $(this).parent().find('.validate_date_error').hide();
        $(this).parent().find('.validate_date_success').show();
      }
});

Automatically reveal or conceal an element based on the entry of a value in an input field, without relying on the keyup() or click events

Answer №1

Answer №2

Answer №3

Similar questions

Instead of providing proper JSON, the system is giving back [object, Object]

Evaluating Vue with AVA - The key is in the whitespace

Discovering the most concise string within the array

Issue with preventdefault() function in Internet Explorer 8

Use jQuery's .replaceWith method only once for each instance

How to resolve undefined Axios Authorization headers in Vue.JS and Node.JS interactions?

The issue arises when the jQuery $.get() method fails to deliver the expected response to the client, despite returning a status code of

Encountering an issue with extending the MUI color palette, receiving a "reading 'dark'" error due to properties of undefined

Mastering the art of utilizing middleware in every HTTP request using Node.js Express

Customizing the tab content background color in MaterializeCSS

Personalized FullCalendar header title

Divide and conquer- Lighttpd's mod_wstunnel combines separate messages by using UNIX socket communication to the backend server

Styling elements with pseudo-classes when a horizontal scroll bar is activated

Is there a way to verify if a FormData file has no content?

Utilizing the JSON.parse method in JavaScript in conjunction with an Ajax request while incorporating the escape character "\n" for new line functionality

Arrange list items in a circular pattern

Utilizing streams for file input and output operations in programming

Requesting information from a model using a JavaScript variable in a cshtml file in an ASP.NET application

Using weasyprint to convert a single HTML page into a PDF

Unexpected JSON data submission