jquery - 如何使单选按钮验证文本框？

Question

我有一个“添加”按钮，单击该按钮将添加一个带有两个带有弹出日历的文本框和一个单选按钮的 div。

1.问题是我想检查文本框是否为空，如果为空，它应该警告“它不能为空”，如果开始日期 > 结束日期，则警告“结束日期应该大于开始日期”

2.另一个问题是我只想选择相应的单选按钮，其他必须取消选择。

谁能给我举个例子

这是我用来添加 div 和弹出式日历的代码

$(document).ready(function () {
$(".datepicker").each(function () {
    $(this).datepicker();
});
$("#btnAddAddress").click(function () {
    $(".container").show();
$(".container").append('<table> <tr> <td> <label ID="lblStartDate">Start Date </label> </td> <td> <input type="text"  class="datepicker"/><label id="lblEndDate" >End Date</label></td><td><input type="text" class="datepicker"/> </td> <td><input type="radio" /></td></tr></table>');

    $(".datepicker").datepicker();
})});

按钮

<div class="AAA">
             <input type="button" id="btnAddAddress" name="btnAddAddress" value="Add"  />

           <div class="container">
           </div>
            </div>

请看这里:http://jsfiddle.net/saranyasaint/ksjn7ko7/

Answer 1

在这里试试这段代码:

$("#btnAddAddress").click(function () {
    $(".container").show();
    var table = $('.container').find('table').last();
    var inc = validate($(this));

    if (inc) return;

    $(".container").append('<table> <tr> <td> <label ID="lblStartDate">Start Date </label> </td> <td> <input type="text"  class="datepicker"/><label id="lblEndDate" >End Date</label></td><td><input type="text" class="datepicker"/> </td> <td><input type="radio" /></td></tr></table>');

    $(".datepicker").datepicker();


})

$('.container').on('click', '[type=radio]', function () {
    var inc = validate($(this));
    if (inc) {
        $(this).prop('checked', false);
    } else {
        $(this).closest('.container').find('[type=radio]').prop('checked', false);
        $(this).prop('checked', true);
    }
});

function validate(el) {
    var inc = 0,
        arr = [],
        flag = false,
        tableClosest = (el[0].type == "radio") ? $(el).closest('table').find('input') : $('.container').find('table').last().find('input');
    tableClosest.each(function () {
        arr.push($(this).val());
        if ($(this).val() == "") {
            inc++;
        }
    });

    if (inc > 0) {
        alert('Field cant be empty');
        flag = true;
    } else {
        if ((new Date(arr[0]).getTime() > new Date(arr[1]).getTime())) {
            alert('End date must be greater than start date');
            flag = true;
        } else {
            flag = false;
        }
    }
    return flag;
}

DEMO