如何在出错的情况下向用户显示他在submit事件上的一些下拉菜单中选择的值

Question

我需要一些帮助，因为我修改了一个jQuery脚本，以获得一些从我的表单链接在一起的下拉菜单。我在我的MySQL数据库上有一个包含3个不同表的PHP脚本，让用户选择他的地区，然后通过我对jQuery脚本执行的Ajax调用，我只向他显示属于所选地区的省份，一旦他选择了省，我就以类似的方式只向他显示属于这个省的城镇。

一切都好，但我想做更多的事情:也就是说，如果用户忘记填写一些必填字段(我用PHP控制所有字段)，当他单击提交时，我将设法向他显示这三个下拉菜单，也许他已经用他所做的选择填充了这三个下拉菜单，而不是强迫他再次填写三个选择。

使用PHP对所有其他字段执行此操作都没有问题，但在这里，我使用了一个带有jQuery脚本的Ajax调用，而且我只想在这个jQuery脚本中执行此操作。

以下是我的脚本，正如您所看到的，我错过了提交事件的最后部分：

$(document).ready(function(){

    var scegli = '<option value="0">Scegli...</option>';
    var attendere = '<option value="0">Attendere...</option>';

    $("select#province").html(scegli);
    $("select#province").attr("disabled", "disabled");
    $("select#comuni").html(scegli);
    $("select#comuni").attr("disabled", "disabled");



    $("select#regioni").change(function(){
        var regione = $("select#regioni option:selected").attr('value');
        $("select#province").html(attendere);
        $("select#province").attr("disabled", "disabled");
        $("select#comuni").html(scegli);
        $("select#comuni").attr("disabled", "disabled");

        $.post("select.php", {id_reg:regione}, function(data){
            $("select#province").removeAttr("disabled"); 
            $("select#province").html(data);    
        });
    }); 



    $("select#province").change(function(){
        $("select#comuni").attr("disabled", "disabled");
        $("select#comuni").html(attendere);
        var provincia = $("select#province option:selected").attr('value');
        $.post("select.php", {id_pro:provincia}, function(data){
            $("select#comuni").removeAttr("disabled");
            $("select#comuni").html(data);  
        });
    }); 



    $("#form_registrazione").submit(function(){
        var reg = $("select#regioni option:selected").attr('value');  
        var prov = $("select#province option:selected").attr('value');  
        var com = $("select#comuni option:selected").attr('value');  


        if ( reg > 0 && prov > 0 && com > 0 )
// I miss here the final part

});    

这是我的website页面的链接:它只是意大利语，但如果你在表单的必填字段填写错误并试图将其发送出去，你仍然可以看到我上面描述的不受欢迎的行为。

谢谢你的帮助。再见。

Answer 1

你好，我更新了代码

$('#submit').on('click', function(event) {
    event.preventDefault();
    if ($('#username').val() == '' ||  $('#password').val() == '') {
        alert('alert - Required fields');
        $('#username').css('border-color','red');
        $('#password').css('border-color','red');
    } else {
        $('#form_registrazione').submit();
    }
});
jQuery.each($('.required'), function () {
        $(this).on('click', function (event) {
            event.preventDefault();
            $(this).addClass('glowing-border').removeClass('red');
        });
});

这是jsFiddle

或您可以使用jQuery validation Plugin