JQuery验证表单未提交

时间:2013-10-23 14:48:04

标签: javascript jquery forms validation

我有一个我在我的网站上使用的表单,并通过一些简单的JQuery验证进行验证。问题是当我更改值时,它没有提交或做任何事情。这是我的代码:

<form id="radForm" method="post" action="events.php?type=rad">
    <div class="searchBoxLeft searchBoxRad"></div>
    <div class="searchBoxMiddle">
        <input id="radSearch" type="text" class="searchBoxInput searchBoxShort" value="<?php echo $yourradius; ?>" />
        <label class="searchBoxLabel">Mile Radius of Your Address</label>
    </div>
    <div id="radButton" class="searchBoxRight"></div>
    <div class="clearLeft"></div>
</form>

<script>
    $(document).ready(function()
    {
        var radsearchok = 0;
        //Rad search
        $('#radSearch').blur(function()
        {
            var radsearch=$("#radSearch").val();
            if(radsearch < 2){
                $('#radSearch').addClass("searchError");
                radsearchok = 0;
            }
            else if(radsearch > 50){
                $('#radSearch').addClass("searchError");
                radsearchok = 0;
            }
            else{
                $('#radSearch').addClass("searchSuccess");
                radsearchok = 1;
            }
        });
        // Submit button action
        $('#radButton').click(function()
        {
            if(radsearchok == 1)
            {            
                $("#radForm").submit();
            }
            else
            {
                $('#radSearch').addClass("searchError");
            }
            return false;
        });
        //End
    });
</script>

有人能看出这有什么问题吗?

2 个答案:

答案 0 :(得分:0)

您需要返回并再次设置表单的.val()属性,否则它将取.val()的原始值而不是radsearch;

不确定您是否确实要更新.val()或只是附加属性。一些选择:

在.blur的结束括号之前 - &gt; });添加“

$("#radSearch").val(radsearch);

或者:

使用新ID向表单添加隐藏输入,如:

<input type='hidden' name='radsearchHidden' />

然后在.blur结束前做同样的事情:

$("#radsearchHidden").val(radsearch);

答案 1 :(得分:0)

我对您的代码(http://jsfiddle.net/zdeZ2/2/)做了一些更改,我将在下面介绍:

<div id="radButton" class="searchBoxRight"></div>我假设你有东西=&gt; <input id="radButton" class="searchBoxRight" type="button" value="rad button">

我用如下的模糊重写了你的验证器。如建议的那样,在比较之前将radSearch值更改为整数。更改在验证之前删除searchErrorsearchSuccess类。我也为你做了一些优化。

//Rad search
$('#radSearch').blur(function () {
    //remove classes from previous validating
    var $this = $(this).removeClass("searchError").removeClass("searchSuccess");
    var radsearch = $this.val() | 0; //radsearch is an integer
    if (radsearch < 2 || radsearch > 50) {
        $this.addClass("searchError");
        radsearchok = 0;
    } else {
        $this.addClass("searchSuccess");
        radsearchok = 1;
    }
});

可以等效地写成:

//Rad search
$('#radSearch').blur(function () {
    var $this = $(this);
    var radsearch = $("#radSearch").val() | 0; //radsearch is an integer
    var valid = radsearch < 2 || radsearch > 50;

    $this.toggleClass("searchError", !valid)
        .toggleClass("searchSuccess", valid);
    radsearchchok = valid ? 1 : 0;
});