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

Question

我有一个按钮 "ADD"，单击该按钮会添加一个 div，其中包含两个带有弹出日历的文本框和一个单选按钮。

1.The 问题是我想检查文本框是否为空，如果为空它应该警告 "it cannot be blank" 并且警告 "enddate should be greater than start date" 如果开始日期 > 结束日期

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

谁能给我一个例子

这是我用来添加 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

Answer 2

我留下了一些地方，您可以在其中注入验证，在哪里添加或不添加，如果失败该怎么办等等。

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

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

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

干杯

欢乐

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");

        }
    }
})

能否请您查看更新后的内容 fiddle http://jsfiddle.net/ksjn7ko7/5/

好的，如果对您有帮助，请标记为答案

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

how to make a radio button validate a text box?

html

jquery

radio-button