JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test page</title>
</head>
<body>
<div class="container">
<script type="text/javascript">
$(document).ready(function() {
$('#submitLink').click(function() {
$('.mainForm').submit();
});
$('.mainForm').customForm({
validation : { 'gameId' : {
'minimum' : {
'message' : "Veuillez s�lectionner un jeu.",
'minimum' : 1
}
},
'ip' : {
'notEmpty' : {
'message' : "Veuillez saisir une adresse IP."
},
'regex' : {
'message' : "Veuillez saisir une adresse IP valide.",
'pattern' : '^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(:[1-9]{1}[0-9]*)*$'
}
}
},
errorTitle : "Impossible de contacter le serveur!",
errorText : "La page demand�e n'a pas pu �tre contact�e, le serveur est-il down? "
});
});
</script>
<div class="content" class="span-24 last">
<form id="server" class="mainForm" action="#" method="post">
<input id="id" name="id" type="hidden" value="1"/>
<div class="inputHolder">
<label for="gameId">Game</label>
<select id="gameId" name="game.id">
<option value="-1">-> Select an option</option>
<option value="1"...
JavaScript
jQuery.fn.customForm = function(settings) {
settings = jQuery.extend({
errorMessage: 'errorMessage',
inputHolder: 'inputHolder',
buttonHolder: 'buttonHolder',
focusedClass: 'focused',
errorClass: 'error',
keyElementsValidated: 'keyElementsValidated',
validation: {},
errorTitle: '',
errorText: '',
errorImage: '/images/icons/error.png'
}, settings);
var possibleValidationRules = ['notEmpty', 'isUnique', 'minimum', 'regex'];
/**
plugin
*/
return this.each(function() {
var myForm = $(this);
// Select form inputHolder and attach them highlighter functionality
myForm.find('.inputHolder').each(function() {
alert('what?');
});
myForm.find('.' + settings.inputHolder + ':first').css("border-top", "none");
// Select form buttonHolder and attach them highlighter functionality
myForm.find('.' + settings.buttonHolder).each(function() {
alert('what?');
});
});
};