Une fonction pour tout mes formulaires

Petit nouveau ! | 4 Messages

18 janv. 2019, 22:06

Bonsoir,

J'ai un code JavaScript qui utilise Jquery pour l'envoi d'un formulaire qui est comme ceci
(function($) {

	'use strict';
	
	/*
	Règles personnalisées
	*/
	
	//-- Pas d'espace blanc
	$.validator.addMethod("noSpace", function(value, element) {
    	if( $(element).attr('required') ) {
    		return value.search(/[a-z0-9]/i) == 0;
    	}

    	return true;
	}, 'Veuillez remplir ce champ vide.');

	/*
	Attribuer des règles personnalisées sur les champs
	*/
	$.validator.addClassRules({
	    'form-control': {
	        noSpace: true
	    }
	});

	/*
	Config Form: Basic
	*/
	$('.config-form').each(function(){
		$(this).validate({
			submitHandler: function(form) {

				var $form = $(form),
					$messageSuccess = $form.find('.config-form-success'),
					$messageError = $form.find('.config-form-error'),
					$submitButton = $(this.submitButton),
					$errorMessage = $form.find('.config-error-message'),
					submitButtonText = $submitButton.val();

				$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Chargement...' ).attr('disabled', true);

				//-- Données des champs
				var formData = $form.serializeArray(),
					data = {};

				$(formData).each(function(index, obj){
				    data[obj.name] = obj.value;
				});

				//-- Envoi du formulaire Ajax
				$.ajax({
					type: 'POST',
					url: $form.attr('action'),
					dataType: 'json',
					data: data
				}).always(function(data, textStatus, jqXHR) {
					
					$errorMessage.empty().hide();

					if (data.response == 'success') {

						//-- Supprime le message du succès au bout de quelque secondes
						setTimeout(function() {
							$('.config-form-success').fadeOut('slow', function() {});
						}, 4000);
						
						$messageSuccess.removeClass('d-none');
						$messageError.addClass('d-none');

						//-- Reset du Formulaire
						$form.find('.form-control')
							.blur()
							.parent()
							.removeClass('has-success')
							.removeClass('has-danger')
							.find('label.error')
							.remove();

						if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
							$('html, body').animate({
								scrollTop: $messageSuccess.offset().top - 80
							}, 300);
						}

						$form.find('.form-control').removeClass('error');

						$submitButton.val( submitButtonText ).attr('disabled', false);
						
						return;

					} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
						$errorMessage.html(data.errorMessage).show();
					} else {
						$errorMessage.html(data.responseText).show();
					}

					$messageError.removeClass('d-none');
					$messageSuccess.addClass('d-none');

					if (($messageError.offset().top - 80) < $(window).scrollTop()) {
						$('html, body').animate({
							scrollTop: $messageError.offset().top - 80
						}, 300);
					}

					$form.find('.has-success')
						.removeClass('has-success');
					
					$submitButton.val( submitButtonText ).attr('disabled', false);

				});
			}
		});
	});
	
}).apply(this, [jQuery]);
Et j'aurai voulu utilisez ce code Javascript (TYPE) pour tout mes formulaires du genre :
<input id="suivant" type="button" value="Envoyer" onClick="go(this.id)">
function go(form_element){ //-- Mon code Javascript qui est au dessus}
Ce qui me permettrai de récupérer l'id du form, et dans mon Javascript $('.config-form').each(function(){ a la place de mettre .config-form récupérer l'argument (id du form) qui est dans la fonction.

Qui aurait une idée peut être que ma proposition n'est pas bonne ?

Merci pour vos réponses en espérant que je me suis bien expliquer :?

Cordialement