Validation of hidden input fields


I'm trying to validate a phone number input field in a form. I'm using intl-tel-input (which is great, BTW) to get the extension and full number, then pass the value to a hidden field so I can send the form data to the server.

This is the displayed form:

<div class="col-md-6">
   <div class="form-group">
      <label class="control-label" translate="" for="field_phone_pasar">Teléfono móvil</label>
      <!-- <input type="hidden" name="phone" id="field_phone" ng-model="" ng-maxlength=12 maxlength=12 /> -->
         <input type="text" class="form-control form-control-200" name="phone_pasar" id="field_phone_pasar" ng-maxlength=15 maxlength=15 ng-model-options="{ updateOn: 'blur' }"/>
         <div ng-show="$invalid &&$touched">
            <p class="help-block" ng-show="$error.required"
               translate="contacta.form.validation.required">This field is required.</p>
            <p class="help-block" ng-show="$error.minlength"
               translate="contacta.form.validation.phoneminlength">Your phone is required to be at least 8 characters</p>
            <p class="help-block" ng-show="$error.maxlength"
               translate="contacta.form.validation.phonemaxlength">Your phone cannot be longer than 12 characters</p>
         <p id="error-msg" class="hide" translate="contacta.form.validation.required" style="color: #a94442; padding-top: 5px">Invalid number</span>

This is the hidden input field, with the REQUIRED attribute, if I remove it, phone value disappears from the data sent to the server.

<input type="hidden" class="form-control form-control-200" name="phone" id="field_phone" ng-model="" required/>

And I copy the data on blur on the controller:

    $("#field_phone_pasar").bind('blur', function(){



The problem: this is not working. The view does not accept the value passed as a valid value, user must touch the form manually to pass the requirement.

I have tried removing the required attribute, but phone disappears from the data sent to the server. Also, with the displayed form solely, field gets validated, but field data is sent as null/empty.

Maybe I should try an Angular approach? I'm looking into this question, but so far I'm getting no luck.


Still struggling with this. I have tried to clone the field, get the value but still getting phone:"" in the POST. Also tried:

$('#phone_pasar').on('change', function(){

But data sent seems to ignore the value.

---UPDATE #2---

I seem to be getting somewhere. As @tim-vermaelen pointed out, I checked if there were other active validators, and tried the $("#field_phone").val($(this).intlTelInput("getNumber")).tri‌​gger('change') and validate-non-visible-controls methods, with no positive effect.

What I have tried is the Angular approach. I have printed the JSON of the, and got this:

  "$viewValue": "",
  "$validators": {},
  "$asyncValidators": {},
  "$parsers": [],
  "$formatters": [
  "$viewChangeListeners": [],
  "$untouched": true,
  "$touched": false,
  "$pristine": true,
  "$dirty": false,
  "$valid": true,
  "$invalid": false,
  "$error": {},
  "$name": "phone",
  "$options": {
    "updateOn": "blur",
    "updateOnDefault": false

Seems that my problem is that I'm mixing jQuery and Angular approaches, and in the way I have messed the model view. Any thoughts on how could I fix this?

Thanks for the effort :)

Have you tried with the change event in this case.

$(formSelector).on('change', '#field_phone_pasar', function(){

Also, bind is from earlier versions. Not a bad idea to include your jQuery version.

Second note: Don't use angular to solve one problem. It's usually a "design" choice but it appears to me you are free ^^