3

I have a signup form built with AngularJS using frontend and backend (with Express.js) input verification. Whenever a user enters an invalid email address, like qwidjq&/%, I'd like to show an error message and send the form back to the user. The email input field should contain the invalid email as the value.

The problem is that I cannot init input(type="email") fields with invalid email values. Only input(type="text") works. Here is an example.

Any ideas how to work around this restriction? I don't want to use input(type="text") and a custom directive. I'd like to keep input(type="email") as it changes keyboard layout on mobile devices.

Thanks in advance!

4 Answers 4

0

Perhaps display the bad text NEXT to the input element, e.g.

<input type="email" /><span id="emailerror">qidjq&/% is not a valid address</span>
1
  • That would be the easy way. Another quick fix would be using the placeholder attribute. However I'd like to have the invalid email as the value of the input field.
    – zemirco
    Aug 13, 2013 at 20:01
0

You can initialise your input by initialising your model with data.

Example: http://plnkr.co/edit/TUJ6lv?p=preview

1
  • Nope, that doesn't work. Try an invalid email like qwdopj098.
    – zemirco
    Aug 13, 2013 at 20:51
0

Unfortunately initializing a model to display invalid data would require patching AngularJS. In fact if you initialize any validated field with invalid data, it will appear blank.

Here is the code that is causing the email input to display blank without a valid email:

https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js (line 622)

  var emailValidator = function(value) {
    if (ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value)) {
      ctrl.$setValidity('email', true);
      return value;
    } else {
      ctrl.$setValidity('email', false);
      return undefined;
    }
  };
0

Forgive me if I'm being stupid but can't you just disable the button on your form while the inputs are invalid. Alternatively, don't leave the form until you have had a positive response to your ajax request. If you get a negative response then show an error message. The data will still be in the form. I'm not familiar with Express.js so perhaps that is forcing you to refresh the form. I thought the whole point of using frameworks like Angular is to give you total control of the UI.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.