Novice in JS/jQuery need help with this code.

Hi,

I’m learning JS/jQuery mainly for implementing AJAX in my WordPress projects.
After hours of headache trying to figure out what’s wrong with this code I decided to post it here, hoping somebody nice will help me.

My contact form JS script is not working as expected.
I can’t figure out why after click on the submit button, the css rules of the required fields don’t change on the page.

The jQuery script:

jQuery( document ).ready( function( $ ) {

	if ( $( '#mystcf-send' ).length > 0 ) {

		alert( 'Everything OK' ); // We enter in the condition... as expected.

		$( 'body' ).append( '<div id="noty"></div>' );

		$( '#mystcf-send' ).click( function() {
			var busy  = false,
					error = false,
					form  = $( this ).parent( 'form' );

			alert( 'Everything OK' ); // After click on '#mystcf-send' button, the alert box popin, the code is excecuting normally untill here...

			form.find( '[required]' ).each( function() {

				alert(); // After click on #mystcf button, this alert box is NOT displaying... and so the conditions below are NOT working.

				if( $.trim( $( this ).val() ) == '' ) {
					$( this ).css( 'border-color', '#FF0000' ); // The fields border styles don't change...
					error = true;
				}
				else {
					$( this ).css( 'border-color', '#CDCDCD' );
				}

			} );
			return false;
		} );
	}
} );

The PHP Script:

<?php

if ( ! defined( 'ABSPATH' ) ) exit;

add_shortcode( 'mystcf', 'mystcf_shortcode' );

add_action( 'wp_enqueue_scripts', 'mystcf_scripts' );

function mystcf_scripts() {
	if ( is_page( 'contact' ) ) :
		wp_register_script( 'mystcf-script', get_stylesheet_directory_uri() . '/inc/contact-form/js/jquery-contact-form.js', array( 'jquery' ) );
		wp_localize_script( 'mystcf-script', 'mystcf_ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
		wp_enqueue_script( 'mystcf-script' );
	endif;
}

function mystcf_shortcode() {
	ob_start();
	mystcf_template();
	$contact_form = ob_get_clean();
	return $contact_form;
}

function mystcf_template() { ?>
	<div class="mystcf-container">
		<form id="mystcf">
			<div class="mystcf-left-panel">
				<p>
					<label for="mystcf-email">Email <abbr class="required" title="<?php esc_attr( __( 'Required', 'mystorefront' ) ); ?>">*</abbr></label><br />
					<input type="email" id="mystcf-email" name="mystcf_email" value="<?php if ( isset( $_POST['mystcf_email'] ) ) echo  esc_attr( $_POST['mystcf_email'] ); ?>" required />
				</p>
				<p>
					<label for="mystcf-first-name">Prénom</label><br />
					<input type="text" id="mystcf-first-name" name="mystcf_first_name" value="<?php if ( isset( $_POST['mystcf_first_name'] ) ) echo esc_attr( $_POST['mystcf_first_name'] ); ?>" />
				</p>
				<p>
					<label for="mystcf-second-name">Nom</label><br />
					<input type="text" id="mystcf-second-name" name="mystcf_second_name" value="<?php if ( isset( $_POST['mystcf_second_name'] ) ) echo esc_attr( $_POST['mystcf_second_name'] ); ?>" />
				</p>
				<p>
					<label for="mystcf-tel">Téléphone</label><br />
					<input type="tel" id="mystcf-tel" name="mystcf_tel" value="<?php if ( isset( $_POST['mystcf_tel'] ) ) echo esc_attr( $_POST['mystcf_tel'] ); ?>" />
				</p>
			</div>
			<div class="mystcf-right-panel">
				<p>
					<label for="mystcf-message">Message <abbr class="required" title="<?php esc_attr( __( 'Required', 'mystorefront' ) ); ?>">*</abbr></label><br />
					<textarea type="text" id="mystcf-message" name="mystcf_message" rows="17" required><?php if ( isset( $_POST['mystcf_message'] ) ) echo esc_textarea( $_POST['mystcf_message'] ); ?></textarea>
				</p>
			</div>
			<?php wp_nonce_field( '', 'security' ); ?>
			<input type="hidden" name="mystcf_sent" value="1">
			<p>
				<input type="submit" class="mystcf-send" id="mystcf-send" value="<?php esc_attr( __( 'Send', 'mystorefront' ) ); ?>">
			</p>
		</form>
	</div><?php
}