Include function to a field

Question

Good afternoon, 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 fields a class when they are left unfilled.

Is there any way I can make a class appear just for the email field? 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 );
                 }

              });
    }

}); 

Answer 1

You can use the input type as email, depending on the browser it will display the input as incorrect. most browsers already do so by default.

but you can add a check by regex too, example:

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>
<input type="email" id="email" value="[email protected]">
<button onclick="teste();">Válidar Email</button>