Include function in a field

Question

Include function in a field

Navigation

#1 by (3 votes)

0

Good afternoon, so I need to make an error message appear when the user does not put the email with "@". already has a function that already includes all the fields a class when they are left unfilled.

How can I make a class appear for the email field only? and that it identifies if it will be with the "@"?

HTML:

<input type="text" name="Nome" placeholder="Nome..." class="quote-form-element" />
<input type="text" name="Cidade" placeholder="Cidade/UF..." class="quote-form-element quote-form-client-email last" />
<input type="text" name="Número de Telefone" placeholder="Telefone..." class="quote-form-element" />
<input type="text" onblur="validacaoEmail(f1.email)" name="Endereço de Email" placeholder="E-mail..." class="quote-form-element quote-form-client-email last" />

JavaScript

    $( '.send-contact' ).click( function() {

    var contactForm = $( this ).parent();
    var contactFormParent = contactForm.parent().parent();

    var fields = {};
    var fieldID = 0;

    var fieldName = '';
    var fieldValue = '';

    var clientName = '';
    var clientEmail = ''; 
    var clientMessageTitle = '';

    var errorFound = false;

    contactForm.find( '.contact-form-element' ).each( function( fieldID ) {

        fieldName = $( this ).attr( 'name' );
        if( typeof fieldName == 'undefined' || fieldName === false ) {

            fieldName = $( this ).data( 'name' );
        }

        if( $( this ).hasClass( 'checkbox' ) ) {

            fieldValue = $( this ).data( 'checked' ) == 'yes' ? $( this ).children( '.checkbox-values' ).children( '.checkbox-value-checked' ).text() : $( this ).children( '.checkbox-values' ).children( '.checkbox-value-unchecked' ).text();
        }

        else {

            fieldValue = $( this ).is( 'input' ) || $( this ).is( 'textarea' ) || $( this ).is( 'select' ) ? $( this ).val() : $( this ).text();
            if( ( $( this ).is( 'input' ) && fieldValue == '' ) || ( $( this ).is( 'textarea' ) && fieldValue == '' ) || ( $( this ).is( 'select' ) && fieldValue == '-' ) ) {

                errorFound = true;
                $( this ).addClass( 'error' );                                                                         
            }

            else {

                $( this ).removeClass( 'error' );
            }
        }

        if( $( this ).hasClass( 'contact-form-client-name' ) ) clientName = $( this ).val();
        if( $( this ).hasClass( 'contact-form-client-email' ) ) clientEmail = $( this ).val();
        if( $( this ).hasClass( 'contact-form-client-message-title' ) ) clientMessageTitle = $( this ).val();

        fields[fieldID] = { 'name': fieldName, 'value': fieldValue };
        fieldID++;  

    });

    if( errorFound == false ) {

        $.ajax({ url: '_assets/submit.php',
                 data: { 'send': 'contact-form', 'values': fields, 'clientName': clientName, 'clientEmail': clientEmail, 'clientMessageTitle': clientMessageTitle },
                 type: 'post',
                 success: function( output ) {

                     contactForm.children( '.contact-form-thanks' ).fadeIn( 300 );
                 }

              });
    }

});

javascript html

asked by anonymous 11.08.2016 / 21:29

1 answer

How to add "www." to a web site with web.config? Show all content of a layout in the preview of Android Studio

score 3 · Accepted Answer

You can use the type of the input as an email, depending on the browser it will offset the input as incorrect. most browsers already do this by default.

But you can add a check by regex too, eg:

function validateEmail(email) {
  var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}


function teste() {
  if (validateEmail($("#email").val())) {
    alert('Email válido.');
  } else {
    alert('Email inválido.');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="email" id="email" value="[email protected]">
<button onclick="teste();">Válidar Email</button>