How to use && operator to validate time in ajax requests

Question

How to use && operator to validate time in ajax requests

I am currently grappling with time validation and feeling a bit perplexed about how to effectively validate both the start_time and end_time using &&. Here is the code I have been working on:

     var re = /^(\d{1,2}):(\d{2})([ap]m)?$/;
    //Start Time
    if($('.start_time').val() != '') {
              if(regs = $('.start_time').val().match(re)) {
                if(regs[3]) {
                  // 12-hour value between 1 and 12
                  if(regs[1] < 1 || regs[1] > 12) {
                    $('.start_time_error').html('<div>Invalid value for hour(s)</div>');
                    $('.start_time').focus();
                    return false;
                  }
                } else {
                    if(regs[1] > 12){
                    $('.start_time_error').html('<div>Invalid value for hour(s)</div>');
                    return false;
                    }
                }
                // minute value between 0 and 59
                if(regs[2] > 59) {
                  $('.start_time_error').html('<div>Invalid value for minute(s)</div>');
                  $('.start_time').val().focus();
                  return false;
                }
              } else {
                $('.start_time_error').html('<div>Invalid time format</div>');
                $('.start_time').focus();
                return false;
              }
              $('.start_time_error').html('<div>Checked</div>');
              return true;
            }else{
                $('.start_time_error').html('<div>Please fill up</div>');
                return false;
            }
            //End time----------
              if($('.end_time').val() != '') {
              if(regs = $('.end_time').val().match(re)) {
                if(regs[3]) {
                  // 12-hour value between 1 and 12
                  if(regs[1] < 1 || regs[1] > 12) {
                    $('.end_time_error').html('<div>Invalid value for hour(s)</div>');
                    $('.end_time').focus();
                    return false;
                  }
                } else {
                    if(regs[1] > 12){
                    $('.end_time_error').html('<div>Invalid value for hour(s)</div>');
                    return false;   
                    }
                }
                // minute value between 0 and 59
                if(regs[2] > 59) {
                  $('.end_time_error').html('<div>Invalid value for minute(s)</div>');
                  $('.end_time').val().focus();
                  return false;
                }
              } else {
                $('.end_time_error').html('<div>Invalid time format</div>');
                $('.end_time').focus();
                return false;
              }
              $('.end_time_error').html('<div>Checked</div>');
              return true;
            }else{
                $('.end_time_error').html('<div>Please fill up</div>');
                return false;
            }

I attempted to use something like:

  if(regs = $('.start_time').val().match(re) && regss == $('.end_time').val().match(re) )

However, it did not work as expected and resulted in an error "regss is not defined". Are there any alternative approaches you could suggest? Thank you!

javascript ajax

Answer 1

Answer №1

It appears that you might be overcomplicating things. Consider separating your concerns. Your logic contains two main blocks: one for validating the time string and another for manipulating the DOM to display errors. Currently, you are repeating the same logic for two fields. It would be better to abstract this into a function.

It may not be necessary to show multiple errors. If the time is invalid, simply provide a message like "invalid time entered" and guide the user on the correct format using placeholders in the input field or a generic error message.

By following this advice, you can significantly reduce the amount of code while also making it cleaner and easier to understand. For example, here is a sample function using a regex pattern adapted from a Stack Overflow post:

function isTime(str) {
  return /^([1-9]|1[012]):[0-5][0-9]\s*?(am|pm)$/i.test(str);
}

You can now validate your inputs as shown below:

var start = $.trim($('.start_time').val())
  , end = $.trim($('.end_time').val());

if (!isTime(start) || !isTime(end)) {
  $('.generic_error').html('<div>Please enter a valid time (HH:MM AM/PM)</div>');
}

This approach should give you an idea of how to refactor your code to adhere to the DRY principle (Don't Repeat Yourself).

Demo: http://jsbin.com/ayAbUyI/1/edit

Answer 2

It appears that you might be overcomplicating things. Consider separating your concerns. Your logic contains two main blocks: one for validating the time string and another for manipulating the DOM to display errors. Currently, you are repeating the same logic for two fields. It would be better to abstract this into a function.

It may not be necessary to show multiple errors. If the time is invalid, simply provide a message like "invalid time entered" and guide the user on the correct format using placeholders in the input field or a generic error message.

By following this advice, you can significantly reduce the amount of code while also making it cleaner and easier to understand. For example, here is a sample function using a regex pattern adapted from a Stack Overflow post:

function isTime(str) {
  return /^([1-9]|1[012]):[0-5][0-9]\s*?(am|pm)$/i.test(str);
}

You can now validate your inputs as shown below:

var start = $.trim($('.start_time').val())
  , end = $.trim($('.end_time').val());

if (!isTime(start) || !isTime(end)) {
  $('.generic_error').html('<div>Please enter a valid time (HH:MM AM/PM)</div>');
}

This approach should give you an idea of how to refactor your code to adhere to the DRY principle (Don't Repeat Yourself).

Demo: http://jsbin.com/ayAbUyI/1/edit

How to use && operator to validate time in ajax requests

Answer №1

Similar questions

Is it possible to implement localStorage for auto-filling multiple forms simultaneously on a single webpage

Small collapse Bootstrap navbar on col-sm width

The error message "Data type must be consistent across all series on a single axis in Google Chart" may cause confusion

What is the best way to display two timers on one page?

Reactivity in Vue not responding when listening from a different object

What is the best way to apply an SVG as the background-image for this text?

Transforming a THREE.js shader into a PIXI.js shader

Having issues with ERR_HTTP_HEADERS_SENT error and receiving a warning related to a promise

AngularJS directive for incorporating additional directives lacks functionality

Preloader will properly handle websocket connections along with pace js

How can I eliminate the scrollbar from appearing on all browsers when visiting my website?

ReactJS component experiencing issues with loading images

Passing a class as a parameter in Typescript functions

How about checking the memory usage in Javascript?

How do I assign a default value to an optional parameter in a derived class in Typescript?

What are the ideal strategies for handling asynchronous calls in Vuex?

Creating a promise class in JavaScript

Unfortunately, the YouTube iframe Embed feature does not have the ability to adjust audio settings on an

The chosen selection automatically deactivates the checkbox with a matching value

Use JavaScript to swap out images