javascript表单验证冲突答案

【问题标题】：Conflict on javascript form validationjavascript表单验证冲突
【发布时间】：2013-08-18 18:54:38
【问题描述】：

我已经实现了一个简单的 javascript 验证，但是验证和表单提交从来没有一起发生过......

当我使用“onsubmit”（如下所示）时，它会在没有验证的情况下转到下一页

如果我在表单末尾使用“onclick”

<input type="button" name="submit" id="send" value="Search Flights" onclick="return validate_booking_form();" />
</form>

它将验证输入..但即使输入正确也不会提交表单

这是我使用的代码 //Javascript验证

function validate_booking_form()
{
    chk_fromcity();
    chk_tocity();
    chk_depature_date();                   

}

function chk_fromcity()
{
    var from_city = $('#from_cities').val();
    if (from_city == '')
    {
        $("#from_cities").removeClass('fieldInput');
        $("#from_cities").addClass('error');
        $("#errormsg_from").fadeTo(200, 1, function()
        {
            $(this).html('Please Enter a City').addClass('errormsg');                   
        })
    }
    else
    {
        $('#from_cities').removeClass('error'); 
        $('#from_cities').addClass('fieldInput');
        $("#errormsg_from").fadeTo(200, 1, function()
        {
            $(this).html('').removeClass('errormsg');                   
        })             
    } 
}

和形式

<form method="POST" action="../controller/booking.php" name="search_flights_names" onsubmit="return validate_booking_form();" >

    /// Form content 
<div class="form_input_container">
                        <div class="form_input">
     <input type="text" id="from_cities" name="from_city" class="fieldInput" onblur="return chk_fromcity()" /> 
                         </div>
</div>

<input type="submit" name="submit" id="send" value="Search Flights" />
</form>

【问题讨论】：

函数validate_booking_form的代码在哪里？
对不起！我忘了包括.....代码已编辑

标签： javascript validation

【解决方案1】：

提交是正确的按钮。

在您的表单元素中尝试 putton onsubmit 并在那里而不是在单击事件上进行验证。这样按回车就不会绕过你的所有验证。

【讨论】：

其实我用的是提交按钮，在这种情况下表单会在没有验证的情况下提交

【解决方案2】：

尝试使用Jquery validate。我认为它应该可以解决您的问题

【讨论】：

【解决方案3】：

从 chk_fromcity() 返回 false 以停止表单发布到操作。

function chk_fromcity()
{
    var from_city = $('#from_cities').val();
    if (from_city == '')
    {
        $("#from_cities").removeClass('fieldInput');
        $("#from_cities").addClass('error');
        $("#errormsg_from").fadeTo(200, 1, function()
        {
            $(this).html('Please Enter a City').addClass('errormsg');                   
        });

        return false;
    }

    $('#from_cities').removeClass('error'); 
    $('#from_cities').addClass('fieldInput');
    $("#errormsg_from").fadeTo(200, 1, function()
    {
        $(this).html('').removeClass('errormsg');                   
    })             

    // return  true; // default is true which is why you were passing the validation
}

【讨论】：