how to validate dynamic text boxes using jquery

» php » how to validate dynamic text boxes using jquery

By : Sana

Date : November 29 2020, 09:01 AM

I wish this helpful for you Here is edited js script. Put your validateEmail inside ready function. I have used submit event.

code :

    $(document).ready(function(){
   $('#fakkir').on("submit",function(e){
   //$('input[name="email[]"]').each(function(){
    //$('input[name="email[]"]').click(function() {
     i = 0;
       var isValid = true;
     $('input[name="email[]"]').map(function(){
     console.log(i++);
     email = $(this).val();
      console.log(email);
     //alert($(this).val());

     if(validateEmail(email) === false )
      {
          isValid = false;
        alert('Invalid email-id');
          //$('#p2').html("Please Enter a Email-id");
          return false;
       }
      return false;
     });
       if(isValid){          
           return true;
       }else{
           return false;
       }

       });
    function validateEmail(email) { 
           var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return re.test(email);
         }
     });

Share :

jquery-validate - addMethod - how to apply custom rule referencing two text boxes?

By : user3811013

Date : March 29 2020, 07:55 AM

I think the issue was by ths following , I'm using the jQuery validation plugin and I want make use of a custom method which takes two the values entered into two different textboxes into account when deciding if the situation is valid. , Try the following:
Create the Rule

code :

jQuery.validator.addMethod("checkTotal",function(value) {
    total = parseFloat($('#LHSOPERAND').val()) + parseFloat($('#RHSOPERAND').val());
    return total == parseFloat($('#TOTAL').val());
}, "Amounts do not add up!");

jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true };

<input type="text" name="TOTAL" id="TOTAL" class="required checkTotal" />

$(document).ready(function() {
    $("#TOTALSFORM").validate();
});

Validate 2 check boxes and 2 text boxes and a date format

By : Stuart K

Date : March 29 2020, 07:55 AM

hope this fix your issue for your radio1 and radio2 to validate if eaither of the radios are check you need to write your code like so: if ((!radio1) && (!radio2){}, because the values in radio1 and radio2 will be true or false, and not a string value.
I would write the entire script like the code below, the null check is not necessary.

code :

if ((!radio1) && (!radio2) && (on ==="") && (date ==="")){
    alert('Please Choose at least 1 Option');
    return false;
}



if (date !== "")
{
     var pattern = /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/;
    if(!(pattern.test(date)))
    {
        alert("Please enter the correct date format DD/MM/YYYY");
    return false;
    }

Get the Dynamic text boxes values in jquery

By : hamzah enginer

Date : March 29 2020, 07:55 AM

this one helps. As per you code $("input[name^= 'stop' ]").val(); Here you are using attribute starts with selector and you have used .val() so it will give you the value of first input text whose name starts with stop.
However you have used .each() so it will iterate for all input text and populate array with same value.

code :

var Stops = [];
var Values = "";
$('#divAdd .child input:text.stop').each(function () {
    Values = $(this).val();
    Stops.push(Values);
});

Jquery serialize is getting same value for dynamic text boxes

By : arun kumar

Date : March 29 2020, 07:55 AM

I hope this helps you . I am using following code to create dynamic text boxes with a check box. , Here is an example. this might help you

code :

function saveNewModifier()
    {
        var groupName = $("#insertModifier").serialize();
        var checkValue = $("#status").serialize();
        alert(groupName);
        alert(checkValue);
        
    }
function addNewModifier()
    {
        $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
        $(this).serialize();
    }


addNewModifier();

$(document).ready(function(){
    $("#btnSave").on('click', function() {
       saveNewModifier();
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<table id="modifiersList">
    <tr><td>Dummy Data</td></tr>
</table>

function saveNewModifier()
    {
        var groupName = $("#insertModifier").serialize();
        var checkValue = $("#status").serialize();
        alert(groupName);
        alert(checkValue);

    };

function addNewModifier()
    {
$('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    };



$(document).ready(function(){
    $("body").on('click', '#btnSave', function() {
       saveNewModifier();
    });
});

<table id="modifiersList">
    <tr><td onclick="addNewModifier();">add new html</td></tr>
</table>

Validate text boxes using Jquery Validation

By : Marian Stagarescu

Date : March 29 2020, 07:55 AM

like below fixes the issue No need to use a plugin just for that. Try this:
jsFiddle Demo

code :

$('#submit').click(function(evt){ //<===============================
  var fn = $('#fn').val();
  var un = $('#un').val();
  var em = $('#em').val();
  if (fn !='' || un!='' || em!=''){
    alert('good to go');
  }else{
    evt.preventDefault(); //<===============================
    $('#fn').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="fn" /><br>
<input type="text" id="un" /><br>
<input type="text" id="em" /><br>
<input type="button" id="submit" value="Submit" />