Как сделать радио-кнопку проверять текстовое поле?

Question

У меня есть кнопка «ДОБАВИТЬ» при нажатии кнопки она добавит div с двумя текстовыми полями со всплывающим календарем и переключателем.

1. Проблема в том, что я хочу, чтобы проверить погоду текстовое поле пустым, если это поле пустым, должно насторожить «не может быть пустым» и предупреждение «EndDate должно быть больше, чем дата начала», если дата начала> ENDDATE

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

Answer 2

Я оставил место, где вы можете впрыснуть валидации где добавлять или нет, что делать, если не удается и т.д.

** редактировать

: Ok я теперь добавлен код заблокировать отправку, если какое-либо из полей пуст, и если флажок установлен.

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

Приветствия

Joy

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/

хорошо, если это поможет вам, пожалуйста, отметьте как ответ