Question

点击按钮时我有一个“ADD”按钮，它会添加一个带有两个文本框的div，弹出日历和一个单选按钮。

1.问题是我想检查文本框是否为空白，如果空白则应警告“它不能为空”并且警告“enddate应大于开始日期”，如果开始日期＆gt;结束日期

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

在这里试试这段代码：

{{1}}

<强> DEMO

Answer 2

我留下了一些可以注入验证的位置，如果失败等，可以在哪里添加或不做什么。

**编辑：好的我现在已经添加了代码来阻止提交，如果任何字段为空并且选中了复选框。

＆＃13;

$(function(){

$("#btnAddAddress").click(function () {
  //callAllValid();
  $(".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" onclick="callValid(this)"/></td></tr></table>');
        
  $(".datepicker").datepicker();
});


});

function callValid(m){
    var inputs = $(m).closest('tr').find('input[type=text]');
    if(!$(m).is(':checked')){
      return true;
    }
    var valid = true;
    inputs.each(function(){
        if($(this).val()===''){
            alert('Empty');
            valid = false;
            return false;//breaks the each loop
        }
    });
    //do anything with the var valid here
  return valid;
}


function callAllValid(){
  var t = $('table :checked');
  var v = true;
  t.each(function(){
    v = callValid(this);
    if(!v){
      return false;
    }
  });
  return v;
}

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return callAllValid();" action="" method="POST">
  <div class="AAA">
    <input type="button" id="btnAddAddress" name="btnAddAddress" value="Add"  />&nbsp;<input type=submit />
    <div class="container">  </div>
  </div>
  
</form>

＆＃13;

干杯

喜

Answer 3

关于验证，我没有做太多...但我想我已经做了你想做的事...... HTML

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

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

的Javascript

$(document).ready(function () {



    $(".datepicker").each(function () {
        $(this).datepicker();
    });

});

$("#btnAddAddress").click(function () {
    debugger
    $(".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 name="radioGroup" type="radio" /></td></tr></table>');

    $(".datepicker").each(function () {

        $(this).datepicker();
    });
})




$('.container').on('click', '[type=radio]', function (e) {

    if ($(e.target).prop("checked")) {
        var table = $(e.target).closest("table")
        var textboxes = $(table).find(".datepicker")

        if ($($(textboxes)[0]).val() == "") {
            alert("StartDate Cannot be empty");

        }
        if ($($(textboxes)[1]).val() == "") {
            alert("EndDate Cannot be empty");

        }

        if (new Date($($(textboxes)[0]).val()) > new Date($($(textboxes)[1]).val())) {
            alert("StartDatemust not be greater than end date");

        }
    }
})

请查看更新的小提琴http://jsfiddle.net/ksjn7ko7/5/

如果这有助于你请标记为答案

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

3 个答案: