Wednesday, 16 September 2020

jQuery validation - concatenate variables for multiple forms

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?



from jQuery validation - concatenate variables for multiple forms

No comments:

Post a Comment