jQuery表单验证的空白字段或格式不正确的字段

Question

我期待在提交时验证日期。如果输入元素的值为空或格式错误，则会显示错误消息。

这里是我的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> 

这里是我的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'); 
    } 
}); 

我需要使用的插件吗？有没有什么办法可以在没有插件的情况下做到这一点？

任何帮助，将不胜感激。

Answer 1

您可以通过使用jQuery的正则表达式achive它无需插件，并在形式上检查有效日期提交事件如下

$（文件）。就绪（函数（）{

$(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