Forma
Code:
<div id="dialog-form" title="Kreiraj novi grejd">
<p class="validateTips">Sva polja su obavezna.</p>
<fieldset>
<label for="name">Oznaka grejda</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="zarada_od">Najmanja zarada</label>
<input type="text" name="zarada_od" id="zarada_od" value="" class="text ui-widget-content ui-corner-all">
<label for="zarada_do">Najveća zarada</label>
<input type="text" name="zarada_do" id="zarada_do" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</div>
Javascript deo
Code:
$(function() {
var name = $( "#name" ),
zarada_od = $( "#zarada_od" ),
zarada_do = $( "#zarada_do" ),
allFields = $( [] ).add( name ).add( zarada_od ).add( zarada_do ),
tips = $( ".validateTips" );
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Unesi Nov grejd": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( name, "username", 3, 16 );
bValid = bValid && checkLength( zarada_od, "zarada_od", 6, 80 );
bValid = bValid && checkLength( zarada_do, "zarada_do", 5, 16 );
if ( bValid ) {
$.post({
url: 'register.php',
data:
{
name: name,
zarada_od: zarada_od,
zarada_do: zarada_do
}
})
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create_grejd" )
.button()
.click(function() {
//
$( "#dialog-form" ).dialog( "open" );
});
});