jQuery表单验证，用于空白字段或格式错误的字段

Question

I am looking to have the date validated on submit. Meaning if the value of the input element is blank or if the format is wrong, an error message will appear.

Here is my HTML:

<form method="get" action="date-picker.html" id="frmdate" onsubmit="return validate()">
  <p>Start Date: <input type="text" name="txtdate" id="startdate"></p><span id="warning_startdate"></span>
  <p>End Date: <input type="text" name="txtdate" id="enddate"></p><span id="warning_enddate"></span>
  <input type="submit" value="send">
</form>

and here is my jQuery:

$(function() {
  $( "#startdate, #enddate" ).datepicker({ dateFormat: 'yy-mm-dd' });
});

$('form').on('submit',function(e){
  if(! ( /\d{2}-\d{2}-\d{2}/.test($('#startdate').val() ) && /\d{2}-\d{2}-\d{2}/.test($('#enddate').val() ) ) ) {
    e.preventDefault();
    document.getElementById("warning_startdate").innerHTML = ('please insert valid date & format');
  }
});

Would I need to use a plugin? Is there any way I can do this without a plug in?

Any help would be appreciated.

Answer 1

you can achive it without plugin by using regular expression in jquery and check for valid dates in form submit event as follow

$(document).ready(function() {

$(function() {
  $( "#startdate, #enddate" ).datepicker({ dateFormat: 'yy-mm-dd' });
    });     //code indentation
$('form').on('submit',function(e){
   if(! ( /\d{2}-\d{2}-\d{2}/.test($('#startdate').val() ) && /\d{2}-\d{2}-\d{2}/.test($('#enddate').val() ) ) )
  {
    e.preventDefault(); //stop form being submitted!
    alert('please insert valid date');
  }
});

});

Answer 2

HTML:

<form action="" method="post" name="form" id="form">
  <p>Start Date <input type="text" id="startdate"></p>
  <p>End Date <input type="text" id="enddate"></p>  
  <input type="submit" id="signup" value="Send">            
</form>

Javascript:

$('#form').submit(function( event ) { 
  if (($("#startdate").val()) === "" || ($("#enddate").val()) === "") {
    alert('The fields start date and end date cannot be empty. Please enter value.');
    return false;
  } else if(! ( /\d{2}-\d{2}-\d{2}/.test($('#startdate').val() ) && /\d{2}-\d{2}-\d{2}/.test($('#enddate').val() ) ) ) {  
    alert('Please insert date in valid format.');
    return false;
  } else {
    $("#form").attr("action", "date-picker.html");
    $( "#form" ).submit();
  }
});

JSFiddle