jQuery validation - concatenate variables for multiple forms

Question

I tryin out to make a validation for multiples form with diferents names (same number of fields), but I'm unable to concatenate the variables. See the forms below:

<form method="post" id="form_validate344" class="form_validate" data-id="344" novalidate="novalidate">
    <div class="col-sm-12">
        <input type="text" class="form-control" value="" name="email-form-nombre344" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" value="" name="email-form-email344" id="email-form-email344" placeholder="EMAIL*">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" value="" name="email-form-telefono344" id="email-form-telefono344" placeholder="TELÉFONO*">
    </div>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="email-form-empresa344" id="email-form-empresa344" placeholder="EMPRESA">
    </div>
    <div class="col-sm-4">
        <input type="text" class="form-control" value="" name="email-form-edad344" id="email-form-edad344" placeholder="EDAD*">
    </div>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="email-form-puesto344" id="email-form-puesto344" placeholder="PUESTO*">
        <input type="hidden" value="344" name="post_id">
    </div>
    <div class="col-sm-4">
        <select name="email-form-sede344" class="form-control" id="email-form-sede344">
                      <option value="">SEDE*</option><option value="Monterrey">Monterrey</option></select>
    </div>
    <div class="col-sm-4 col-sm-offset-4">
        <input type="submit" class="form-control btn submit" name="enviar344" value="ENVIAR">

    </div>

</form>

as you can see every input has a name ending with a number( in this case 344), this is generating in php code to distinct other forms, also here is my javascrip to validate:

$('form.form_validate').each(function () {


      $( this ).validate( {

      rules:  {"email-form-nombre344" : "required", },


      messages: {
       test: "Por favor entra tu usuario",
       "email-form-email344" : "Por favor entra un email válido",
       "email-form-telefono344" : "Por favor entra un número de telefono válido",
       "email-form-empresa344" : "Por favor entra tu empresa",
       "email-form-edad344" : "Por favor entra un número de edad válido",
       "email-form-puesto344" : "Por favor entra tu puesto",
       "email-form-sede344" : "Por elige una sede",
      },
      errorElement: "em",
      errorPlacement: function ( error, element ) {
       // Add the `help-block` class to the error element
       error.addClass( "help-block" );

       // Add `has-feedback` class to the parent div.form-group
       // in order to add icons to inputs
       //element.parents( ".jv" ).addClass( "has-feedback" );

       if ( element.prop( "type" ) === "checkbox" ) {
         error.insertAfter( element.parent( "label" ) );
       } else {
         error.insertAfter( element );
       }

       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !element.next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>" ).insertAfter( element );
       }
      },
      success: function ( label, element ) {
       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !$( element ).next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>" ).insertAfter( $( element ) );
       }
      },
      highlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-error" ).removeClass( "has-success" );
       $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
      },
      unhighlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-success" ).removeClass( "has-error" );
       $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
      }
      });
    });

it works but will only validate the form ending with 344, and I want to validate every form. Also I have used this to concatenate variables:

var nombre = "344";

var myObj = {};

myObj["email-form-nombre" + nombre] = {
  'required': "true"
};
.
.
.
rules: {
  myObj
},

but nothing works. How to achieve this?

Why not just use PHP to dynamically write the proper rules objects in the first place? — Sparky
– Sparky, Commented Apr 11, 2017 at 1:32
Every form it has it´s own submit button? Then I assume you are validating them individually. Please, make a working snippet example, with at least 2 forms, to reproduce the problem you are facing. And then we maybe can help you. — SilverSurfer
– SilverSurfer, Commented Sep 20, 2020 at 12:57

Sandeep Modak · Accepted Answer · 2020-09-16 06:59:59Z

If you have many forms with distinct form names (same number of fields) then why naming input names dynamically . you can have input names similar for all the forms for example : form with id = "form_validate344" can have following input

<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">

form with id = "form_validate345" can have following input

<input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre345" placeholder="NOMBRE COMPLETO*">

in both of above cases input names are similar and input id's only difer and same applies to all the other inputs

so in js code there is no need to mention form name followed by ids

your final code will be like:

HTML

<form method="post" id="form_validate344" class="form_validate" data-id="344" novalidate="novalidate">

    <div class="col-sm-12">
        <input type="text" class="form-control" value="" name="email-form-nombre" id="email-form-nombre344" placeholder="NOMBRE COMPLETO*">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" value="" name="email-form-email" id="email-form-email344" placeholder="EMAIL*">
    </div>
    <div class="col-sm-6">
        <input type="text" class="form-control" value="" name="email-form-telefono" id="email-form-telefono344" placeholder="TELÉFONO*">
    </div>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="email-form-empresa" id="email-form-empresa344" placeholder="EMPRESA">
    </div>
    <div class="col-sm-4">
        <input type="text" class="form-control" value="" name="email-form-edad" id="email-form-edad344" placeholder="EDAD*">
    </div>
    <div class="col-sm-8">
        <input type="text" class="form-control" value="" name="email-form-puesto" id="email-form-puesto344" placeholder="PUESTO*">
        <input type="hidden" value="344" name="post_id">
    </div>
    <div class="col-sm-4">
        <select name="email-form-sede" class="form-control" id="email-form-sede344">
                      <option value="">SEDE*</option><option value="Monterrey">Monterrey</option></select>
    </div>
    <div class="col-sm-4 col-sm-offset-4">
        <input type="submit" class="form-control btn submit" name="enviar344" value="ENVIAR">

    </div>

</form>

JS

$('.form_validate').each(function () {

$(this).validate( {
//HERE I HAVE REMOVED 344 (form ids) 
rules:  {"email-form-nombre" : "required", },

//HERE I HAVE REMOVED 344 (form ids) 
messages: {
 test: "Por favor entra tu usuario",
 "email-form-email" : "Por favor entra un email válido",
 "email-form-telefono" : "Por favor entra un número de telefono válido",
 "email-form-empresa" : "Por favor entra tu empresa",
 "email-form-edad" : "Por favor entra un número de edad válido",
 "email-form-puesto" : "Por favor entra tu puesto",
 "email-form-sede" : "Por elige una sede",
},
errorElement: "em",
errorPlacement: function ( error, element ) {
 // Add the `help-block` class to the error element
 error.addClass( "help-block" );

 // Add `has-feedback` class to the parent div.form-group
 // in order to add icons to inputs
 //element.parents( ".jv" ).addClass( "has-feedback" );

 if ( element.prop( "type" ) === "checkbox" ) {
   error.insertAfter( element.parent( "label" ) );
 } else {
   error.insertAfter( element );
 }

 // Add the span element, if doesnt exists, and apply the icon classes to it.
 if ( !element.next( "span" )[ 0 ] ) {
   $( "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>" ).insertAfter( element );
 }
},
success: function ( label, element ) {
 // Add the span element, if doesnt exists, and apply the icon classes to it.
 if ( !$( element ).next( "span" )[ 0 ] ) {
   $( "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>" ).insertAfter( $( element ) );
 }
},
highlight: function ( element, errorClass, validClass ) {
 $( element ).parents( ".jv" ).addClass( "has-error" ).removeClass( "has-success" );
 $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
},
unhighlight: function ( element, errorClass, validClass ) {
 $( element ).parents( ".jv" ).addClass( "has-success" ).removeClass( "has-error" );
 $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
}
});
});

user2560539 · Accepted Answer · 2020-09-20 19:07:54Z

You may change your JS code accordingly:

$('form[id^="form_validate").each(function () {
     let thisID = $( this ).attr('id').replace('form_validate','');

      $( this ).validate( {

      rules:  {"email-form-nombre"+thisID : "required", },


      messages: {
       test: "Por favor entra tu usuario",
       "email-form-email"+thisID : "Por favor entra un email válido",
       "email-form-telefono"+thisID : "Por favor entra un número de telefono válido",
       "email-form-empresa"+thisID : "Por favor entra tu empresa",
       "email-form-edad"+thisID : "Por favor entra un número de edad válido",
       "email-form-puesto"+thisID : "Por favor entra tu puesto",
       "email-form-sede"+thisID : "Por elige una sede",
      },
      errorElement: "em",
      errorPlacement: function ( error, element ) {
       // Add the `help-block` class to the error element
       error.addClass( "help-block" );

       // Add `has-feedback` class to the parent div.form-group
       // in order to add icons to inputs
       //element.parents( ".jv" ).addClass( "has-feedback" );

       if ( element.prop( "type" ) === "checkbox" ) {
         error.insertAfter( element.parent( "label" ) );
       } else {
         error.insertAfter( element );
       }

       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !element.next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>" ).insertAfter( element );
       }
      },
      success: function ( label, element ) {
       // Add the span element, if doesnt exists, and apply the icon classes to it.
       if ( !$( element ).next( "span" )[ 0 ] ) {
         $( "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>" ).insertAfter( $( element ) );
       }
      },
      highlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-error" ).removeClass( "has-success" );
       $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
      },
      unhighlight: function ( element, errorClass, validClass ) {
       $( element ).parents( ".jv" ).addClass( "has-success" ).removeClass( "has-error" );
       $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
      }
      });
    });

Collectives™ on Stack Overflow

jQuery validation - concatenate variables for multiple forms

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related