JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css">
<form action="http://oroszi.net:3000/form">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Név:</td>
<td><input type="text" name="name" id="name" class="required"/>*</td>
</tr>
<tr>
<td>Születési hely:</td>
<td><input type="text" name="bplace" id="bplace" class="required"/>*</td>
</tr>
<tr>
<td>Születési dátum:</td>
<td><input type="text" name="bdate" id="bdate"/>*</td>
</tr>
<tr>
<td>Nem</td>
<td>
<div id="radios">
<input type="radio" value="m" name="sex" id="rad-male" /><label for="rad-male">Fiú</label>
<input type="radio" value="f" name="sex" id="rad-female" /><label for="rad-female">Lány</label>
</div>
</td>
</tr>
<tr>
<td>Beleegyezés</td>
<td>
<input type="checkbox" name="agree" value="1" id="chk-agree" />
<label for="chk-agree">Beleegyezek bármibe</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Mentés" />
</td>
</tr>
</tbody>
</table>
</form>
JavaScript
$( "#bdate" ).datepicker({ dateFormat: 'yy-mm-dd' });
$(function() {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$("#bplace, #name").autocomplete({
source: availableTags
});
});
$("input:submit").button();
$("#radios").buttonset()
$("form").submit(function() {
$(".required").filter(function() {
if ($.trim($(this).val())) {
return false;
}
else {
return false;
}
});
if (required.lenght !== 3) {
alert("A név kitöltése kötelező!");
return false;
}
$.ajax({
url: $(this).attr("action"),
data: $(this).serialize(),
crossDomain: true,
success: function(resp) {
console.log(resp)
},
error: function() {}
});
return false;
});