Polymer Gold Email Input

The polymer gold email input element is a simple text field used to specify email addresses. It is styled in Material design.

Syntax:

The gold-email input element has an optional label, which is "email" by default:

Validation

The validate() method is used to validate email addresses manually. It returns true if it is valid otherwise false, if it is not valid. You can use auto-validate and required attributes to make the input to be automatically validated.

Example

Run the following command to install gold-email-input element in your project directory. After that you can use this element in your application:

It will install all the related elements of polymer_ gold-email-input under the bower_components folder.

Create an index.html file and add the following code in it to see the usage of gold-email-input element in Polymer.js.

<!DOCTYPE html>
<html>
   <head>
      <title>Gold email Input</title>
      <meta charset = "utf-8">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/gold-email-input/gold-email-input.html">
   </head>

   <body>
      <h3>Pre-validated email</h3>
      <gold-email-input
         value = "example@email.com"
         auto-validate  
         style = "width:35%; display:inline-block;">
      </gold-email-input><br/>
	
      <h3>Displayes error message</h3>
      <gold-email-input 
         label = "Enter an email address" 
         auto-validate 
         error-message = "Please enter a valid email"
         style = "width:35%; display:inline-block;">
      </gold-email-input>	
   </body>
</html>

Output: