Question

我试图验证表单中的电话号码输入字段。我使用intl-tel-input（这很棒，BTW）获取扩展名和完整号，然后将值传递给隐藏字段，以便将表单数据发送到服务器。

这是显示的形式：

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

这是隐藏的输入字段，带有REQUIRED属性，如果我删除它，电话值就会从发送到服务器的数据中消失。

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

我在控制器上复制模糊数据：

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

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

    });

问题：这不起作用。视图不接受作为有效值传递的值，用户必须手动触摸表单以传递要求。

我已尝试删除所需的属性，但手机会从发送到服务器的数据中消失。此外，仅显示表单，字段得到验证，但字段数据发送为空/空。

也许我应该尝试使用Angular方法？我正在研究这个问题，但到目前为止，我没有运气。

---更新的问题和进展---

仍在努力解决这个问题。我试图克隆该字段，获取值但仍然在POST中获得phone:""。还尝试过：

$('#phone_pasar').on('change', function(){      
     $("#phone").val($('#phone_pasar').intlTelInput("getNumber"));      
});

但发送的数据似乎忽略了该值。

---更新＃2 ---

我似乎正在某个地方。正如@ tim-vermaelen指出的那样，我检查了是否有其他有效验证器，并尝试了$("#field_phone").val($(this).intlTelInput("getNumber")).tri‌gger('change')和validate-non-visible-controls方法，但没有产生任何积极影响。

我所尝试的是Angular方法。我打印了vm.form.phone的JSON，得到了这个：

{
  "$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
  }
}

似乎我的问题是我混合了jQuery和Angular方法，并且我已经弄乱了模型视图。关于如何解决这个问题的任何想法？

感谢您的努力：）

Answer 1

在这种情况下，您是否尝试过change事件。

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

此外，bind来自早期版本。包含您的jQuery版本并不是一个坏主意。

第二个注意事项：不要使用角度来解决一个问题。它通常是一个＆＃34;设计＆＃34;选择，但在我看来你是自由的^^

Answer 2

隐藏输入应具有id和name属性的相同值。

您使用值field_phone设置id属性，使用值phone设置name属性，这可能是导致混淆的原因。这意味着您在浏览器中测试的元素（id="field_phone"）将不是您在服务器上收到的元素（name="phone"）。

更多信息here。请尝试设置隐藏的输入，如此...

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

另外，请尝试使用表单onsubmit事件来设置要发送到服务器的数据。

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

这样做会更好，因为您的代码将不再依赖于onblur字段上的onchange或#field_phone_pasar事件。

验证隐藏的输入字段

2 个答案: