I have a form field of type email for logging in. We also allow users to log in with their nicknames and phone numbers.

The problem is that Twitter bootstrap automatically blocks the form submit if the format in the email field is not email (doesn't contain say '@').

Is there any way to disable this twitter .js binding on clicking my "Sign in" button?

Been googling around for some 2 hours now and couldn't find any solutions so I would greatly appreciate any answers!

I have a form field of type email for logging in. We also allow users to log in with their nicknames and phone numbers.

The problem is that Twitter bootstrap automatically blocks the form submit if the format in the email field is not email (doesn't contain say '@').

Is there any way to disable this twitter .js binding on clicking my "Sign in" button?

Been googling around for some 2 hours now and couldn't find any solutions so I would greatly appreciate any answers!

• javascript
• jquery
• twitter-bootstrap
• ruby-on-rails-4

• simply use novalidate tag in form, or change type="email" to type="text" and lose keyboard suggestions in mobile devices – Rafe Commented Dec 23, 2020 at 14:07

2 Answers 2

Text type is bad UX for email

<input type="text" />

This text type is not bad. But in the mobile web page, this <input> tag will display keyboard for just normal text not email. What did it mean? Mobile phone's keyboard did not show @, so users should swipe keyboard to type @. And they can not use autoplete. This is bad ux.

Solution

Use novalidate="novalidate" attribute in your <form> tag. This attribute skip validation when submitted. Here's examples.

<form novalidate="novalidate" class="simple_form new_user">
  ...
</form>

If you use rails ERB simple-form, then you can use novalidate like this.

<%= simple_form_for(resource, html: { novalidate: true }) do |f| %>
  ...
<% end %>

References

• https://developers.google./web/fundamentals/design-and-ux/input/forms#html5_input_types

Simply use html without email attribute:

<input type"email" /><!--will block-->
<input type="text" /><!--will not block-->