0

Boa tarde, to precisando fazer com que apareça uma mensagem de erro quando o usuário nao colocar o email com "@". já tem uma função que já inclui a todos os campos uma classe quando elas ficam sem ser preenchidas.

Tem como eu fazer para que apareça uma classe apenas para o campo de email? e que ela identifique se vai estar com o "@"?

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 );
                 }

              });
    }

}); 

1 Resposta 1

3

Você pode utilizar o type do input como email, dependendo do navegador ele irá flegar o input como incorreto. a maioria dos navegadores já o fazem por padrão.

mas você pode adicionar uma verificação por regex também, exemplo:

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>

1
  • eu tentei usar, mas também não funcionou, quando aperto o botão ele já apresenta direto a mensagem de que foi enviado Commented 11/08/2016 às 20:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .