Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

How I define Jquery validation plugin rule like following name attribute

on

How can I define jquery validation plugin rule? I am using the same name attribute for all permanent and temporary addresses. I am using permanent.state attribute for permanent state and temporary.state name attribute is used temporary state. Thanks in advance.

My code: 

$('#addressForm').validate({
  rules: {
    country: {
      required: true
    },
    state: {
      required: true
    },
    district: {
      required: true
    },

    vdcMunicipalityMetropolitan: {
      required: true
    },
    wardNo: {
      required: true,
      number: true,
      minlength: 1,
      maxlength: 3
    },
    mobileNo: {
      required: true,
      number: true,
      minlength: 10,
      maxlength: 15

    },
    email: {
      required: true,
      email: true
    },
    perState: {
      required: true
    },
    perDistrict: {
      required: true
    },
    perVdcMunicipalityMetropolitan: {
      required: true
    },
    perWardNo: {
      required: true,
      number: true,
      minlength: 1,
      maxlength: 3
    },
    perMobileNo: {
      required: true,
      number: true,
      minlength: 10,
      maxlength: 15

    },
    perEmail: {
      required: true,
      email: true
    },
  },
  submitHandler: function(form) {
    var addressData = $('#addressForm').serialize();
    var URL = "${createLink(controller: 'personalInfo', action : 'saveAddress')}";
    $.ajax({
      type: "POST",
      url: URL,
      data: addressData,
      success: function(resp) {
        $('.address').removeClass('active');
        $('.employmentDetail').addClass('active');
        $('#address').removeClass('active');
        $('#employmentDetail').addClass('active');
        if (resp && resp !== '') {
          $("input[name='personalInfoId']").val(res)
        } else {
          alert("Some thing wrong")
        }
      }
    })
    return false;
  }
});
<form id="addressForm" name="addressForm" method="POST">
  <input type="hidden" name="personalInfoId" value="${personalInfo?.id}" />
  <fieldset class="margin-bottom-default">
    <legend class="individual-form">Permanent Address:</legend>
    <input type="hidden" name="permanent.addressType" value="permanent" />

    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Country  *</label>
        <select name="permanent.country" class="form-control">
          <option value="NPL">Nepal</option>
        </select>
      </div>

      <div class="form-group col-md-6" id="clonedState">
        <label>State *</label>

        <g:select class="form-control" id="permanentState" onchange="changeDistrict('permanent')" optionKey="id" optionValue="stateName" name="permanent.state" from="${State.list()}" noSelection="['': '--Search State--']" value="${personalInfo?.address?.find { it.isTemporary == false }?.state?.id}"
        />
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Zone</label>
        <g:select class="form-control" name="permanent.zone" from="${Zones.values()}" value="${personalInfo?.address?.find { it.isTemporary == false }?.zone}" noSelection="['': '--Search State--']" />

      </div>

      <div class="form-group col-md-6" id="cloneDistrict">
        <label>District *</label>

        <g:select class="form-control" name="permanent.district" optionKey="id" optionValue="districtName" from="${District.findAllByState(personalInfo?.address?.find {
                                  it.isTemporary == false
                              }?.state)}" noSelection="['': '--Search State--']" value="${personalInfo?.address?.find { it.isTemporary == false }?.district?.id}" onchange="changeLocalUnit('permanent')" id="permanentDistrict" />

      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>VDC / Municipality / Metropolitan *</label>
        <g:select class="form-control" name="permanent.vdcMunicipalityMetropolitan" from="${LocalUnit.findAllByDistrict(personalInfo?.address?.find {
                                  it.isTemporary == false
                              }?.district)}" optionKey="id" optionValue="localUnitName" noSelection="['': '--Search State--']" value="${personalInfo?.address?.find {
                                  it.isTemporary == false
                              }?.vdcMunicipalityMetropolitan?.id}" id="permanentLocalUnit" />

      </div>

      <div class="form-group col-md-6">
        <label>Tole</label>
        <input type="text" class="form-control" placeholder="" name="permanent.tole" value="${personalInfo?.address?.find { it.isTemporary == false }?.tole}">
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Ward No. *</label>
        <input type="text" class="form-control" placeholder="" name="permanent.wardNo" value="${personalInfo?.address?.find { it.isTemporary == false }?.wardNo}">

      </div>

      <div class="form-group col-md-6">
        <label>Block No.</label>
        <input type="text" class="form-control" placeholder="" name="permanent.blockNo" value="${personalInfo?.address?.find { it.isTemporary == false }?.blockNo}">

      </div>
    </div>


    <div class="form-row row">

      <div class="form-group col-md-6">
        <label>Telephone No.</label>
        <input type="text" class="form-control" placeholder="" name="permanent.telephoneNo" value="${personalInfo?.address?.find { it.isTemporary == false }?.telephoneNo}">
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Mobile No. *</label>
        <input type="text" class="form-control" placeholder="" name="permanent.mobileNo" value="${personalInfo?.address?.find { it.isTemporary == false }?.mobileNo}" />

      </div>

      <div class="form-group col-md-6">
        <label>Fax No.</label>
        <input type="text" class="form-control" placeholder="" name="permanent.faxNo" value="${personalInfo?.address?.find { it.isTemporary == false }?.faxNo}" />
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Email Id *</label>
        <input type="email" class="form-control" placeholder="" name="permanent.email" value="${personalInfo?.address?.find { it.isTemporary == false }?.email}">

      </div>

      <div class="form-group col-md-6">
        <label>Nearest Landmark</label>
        <input type="text" class="form-control" placeholder="" name="permanent.nearestLandmark" value="${personalInfo?.address?.find { it.isTemporary == false }?.nearestLandmark}" />
      </div>
    </div>
  </fieldset>


  <fieldset class="margin-bottom-default">
    <legend class="individual-form">Temporary Address:</legend>
    <input type="hidden" name="temporary.addressType" value="temporary" />


    <div class="form-row row">

      <div class="form-group col-md-6">
        <label>State *</label>

        <g:select class="form-control" onchange="changeDistrict('temporary')" optionKey="id" optionValue="stateName" id="temporaryState" name="temporary.state" from="${State.list()}" noSelection="['': '--Search State--']" value="${personalInfo?.address?.find { it.isTemporary == true }?.state?.id}"
        />
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Zone</label>
        <g:select class="form-control" name="temporary.zone" from="${Zones.values()}" noSelection="['': '--Search State--']" value="${personalInfo?.address?.find { it.isTemporary == true }?.zone}" />

      </div>

      <div class="form-group col-md-6">
        <label>District *</label>
        <g:select class="form-control" name="temporary.district" noSelection="['': '--Search State--']" optionKey="id" optionValue="districtName" value="${personalInfo?.address?.find { it.isTemporary == true }?.district?.id}" from="${District.findAllByState(personalInfo?.address?.find {
                                  it.isTemporary == true
                              }?.state)}" id="temporaryDistrict" onchange="changeLocalUnit('temporary')" />
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>VDC / Municipality / Metropolitan *</label>
        <g:select class="form-control" name="temporary.vdcMunicipalityMetropolitan" optionKey="id" optionValue="localUnitName" from="${LocalUnit.findAllByDistrict(personalInfo?.address?.find {
                                  it.isTemporary == true
                              }?.district)}" value="${personalInfo?.address?.find {
                                  it.isTemporary == true
                              }?.vdcMunicipalityMetropolitan?.id}" noSelection="['': '--Search State--']" id="temporaryLocalUnit" />

      </div>

      <div class="form-group col-md-6">
        <label>Tole</label>
        <input type="text" class="form-control" placeholder="" name="temporary.tole" value="${personalInfo?.address?.find { it.isTemporary == true }?.tole}">
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Ward No. *</label>
        <input type="text" class="form-control" placeholder="" name="temporary.wardNo" value="${personalInfo?.address?.find { it.isTemporary == true }?.wardNo}">

      </div>

      <div class="form-group col-md-6">
        <label>Tole</label>
        <input type="text" class="form-control" placeholder="" name="temporary.tole" value="${personalInfo?.address?.find { it.isTemporary == true }?.tole}">

      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Block No.</label>
        <input type="text" class="form-control" placeholder="" name="temporary.blockNo" value="${personalInfo?.address?.find { it.isTemporary == true }?.blockNo}" />

      </div>

      <div class="form-group col-md-6">
        <label>Telephone No.</label>
        <input type="text" class="form-control" placeholder="" name="temporary.telephoneNo" value="${personalInfo?.address?.find { it.isTemporary == true }?.telephoneNo}">
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Mobile No. *</label>
        <input type="text" class="form-control" placeholder="" name="temporary.mobileNo" value="${personalInfo?.address?.find { it.isTemporary == true }?.mobileNo}" />

      </div>

      <div class="form-group col-md-6">
        <label>Fax No.</label>
        <input type="text" class="form-control" placeholder="" name="temporary.faxNo" value="${personalInfo?.address?.find { it.isTemporary == true }?.faxNo}">
      </div>
    </div>


    <div class="form-row row">
      <div class="form-group col-md-6">
        <label>Email Id *</label>
        <input type="email" class="form-control" placeholder="" name="temporary.email" value="${personalInfo?.address?.find { it.isTemporary == true }?.email}">

      </div>

      <div class="form-group col-md-6">
        <label>Nearest Landmark</label>
        <input type="text" class="form-control" placeholder="" name="temporary.nearestLandmark" value="${personalInfo?.address?.find { it.isTemporary == true }?.nearestLandmark}">
      </div>
    </div>
    <input type="submit" id="address-btn" class="btn btn-primary pull-right" value="Save" />
  </fieldset>
</form>

Comments

Post a Comment