Validating hidden input fields

Question

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="contacta.form.phone" for="field_phone_pasar">Teléfono móvil</label>
      <!-- <input type="hidden" name="phone" id="field_phone" ng-model="vm.form.phone" ng-maxlength=12 maxlength=12 /> -->
      <div>
         <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="contactaForm.phone.$invalid && contactaForm.phone.$touched">
            <p class="help-block" ng-show="contactaForm.phone.$error.required"
               translate="contacta.form.validation.required">This field is required.</p>
            <p class="help-block" ng-show="contactaForm.phone.$error.minlength"
               translate="contacta.form.validation.phoneminlength">Your phone is required to be at least 8 characters</p>
            <p class="help-block" ng-show="contactaForm.phone.$error.maxlength"
               translate="contacta.form.validation.phonemaxlength">Your phone cannot be longer than 12 characters</p>
         </div>
         <p id="error-msg" class="hide" translate="contacta.form.validation.required" style="color: #a94442; padding-top: 5px">Invalid number</span>
      </div>
   </div>
</div>

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="vm.form.phone" required/>

And I copy the data on blur on the controller:

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

        $("#field_phone").val($("#field_phone_pasar").intlTelInput("getNumber"));

    });

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.

---UPDATED QUESTION AND PROGRESS---

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(){      
     $("#phone").val($('#phone_pasar').intlTelInput("getNumber"));      
});

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 vm.form.phone, and got this:

{
  "$viewValue": "",
  "$validators": {},
  "$asyncValidators": {},
  "$parsers": [],
  "$formatters": [
    null
  ],
  "$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 :)

Answer 1

Have you tried with the change event in this case.

$(formSelector).on('change', '#field_phone_pasar', function(){
    $("#field_phone").val($(this).intlTelInput("getNumber"));
});

---

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 ^^

Answer 2

The hidden input should have the same value for the id and name attributes.

You set up the id attribute with the value field_phone and name attribute with the value phone, which is probably the cause of the confusion. This means that the element you're testing in the browser (id="field_phone"), will not be the element you receive on the server (name="phone").

More information here. Try instead setting up your hidden input like so...

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

Also, try using the form's onsubmit event to set up the data to be sent to the server.

$( "form" ).submit(function( event ) {
    $("#field_phone").val($(this).intlTelInput("getNumber"));
});

Doing it this way, is better because your code will no longer be dependent on an onblur or an onchange event on the #field_phone_pasar field.