jQuery Validation Submits non-ajax even when fails

Question

i am using jQuery validate , and it actually works , meaning it shows errors and asks user to fix them , though if the user clicks on submit - it submits with no problems. Can someone please help me ? Code samples are below :

<form class="col-lg-2 well" id="filterForm">
    <p><fmt:message key="name1"/></p>
    <input id="name" type="text" placeholder="name" value="${searchBean.name}" name="name" class="input-large text-primary">

    <p><fmt:message key="minimum.price"/></p><input id="minPrice" type="text" placeholder="minPrice" value="${searchBean.minPrice}" name="minPrice" class="input-large text-primary">

    <p><fmt:message key="maximum.price"/></p>
    <input id="maxPrice" type="text" placeholder="maxPrice" value="${searchBean.maxPrice}" name="maxPrice" class="input-large text-primary">

    <p><fmt:message key="manufacturer1"/></p>
    <input id="manufacturer" type="text" placeholder="manufacturer" value="${searchBean.manufacturer}" name="manufacturer" class="input-large text-primary">

    <p>
        <fmt:message key="categories"/>
        <c:forEach var="cat" items="${requestScope.categories}">
            <p><c:out value="${cat.second}"/></p>
            <input type="checkbox" name="category" value="<c:out value="${cat.first}"/>"/>
            </p>
        </c:forEach>

        <p><fmt:message key="sorts"/></p>
        <select name="sort">
            <option value="name"><fmt:message key="name"/></option>
            <option value="manufacturer"><fmt:message key="manufacturer"/></option>
            <option value="price"><fmt:message key="price"/></option>
        </select>

        <select name="sortType">
            <option value="ASC"><fmt:message key="asc"/></option>
            <option value="DESC"><fmt:message key="desc"/></option>
        </select>
    </p>

    <p><fmt:message key="pagesize"/>
        <input type="text" name="pageSize" id="pageSize" placeholder="pageSize" value="${searchBean.page.pageSize}">
    </p>

    <p><input type="submit" value="Filter" class="btn btn-primary"></p>
</form>

And here is the validation function:

$('#filterForm').validate(
    {
        rules: {
            name: {
                maxLength: 50,
                required: false
            },
            minPrice: {
                required: validatePrices() == true,
                min: 0,
                digits: true
            },
            maxPrice: {
                required: validatePrices() == true,
                min: 1,
                digits: true
            },
            manufacturer: {
                maxLength: 50,
                required: false
            },
            pageSize: {
                required: true,
                min: 0,
                number: true
            }
        },
        messages: {
            name: {
                maxLength:<fmt:message key="length.should.be.50.or.less"/>
            },
            minPrice: {
                min:<fmt:message key="min.length.is.1"/>,
                required:<fmt:message key="min.price.should.be.less.than.max"/>
            },
            manufacturer: {
                maxLength:<fmt:message key="length.should.be.50.or.less"/>
            },
            maxPrice: {
                min:<fmt:message key="min.length.is.1"/>,
                required: validatePrices() == true
            },
            pageSize: {
                min:<fmt:message key="min.length.is.1"/>
            }
        }
    }
)
});

Thx for help.

After cleaning up the format a bit, it looks like you have some errors in your code. (e.g., extra `` tags, extra `}` in the rules object, etc.). I'd recommend running your code through some of the online code validators, to make sure that your code is clean, before trying to troubleshoot. — talemyn, Nov 12 '13 at 23:47

score 0 · Answer 1 · answered Nov 13 '13 at 17:10

The jQuery Validate plugin will block the normal form submit as long as there are validation errors. However, your code has some potential issues that will interfere with the proper operation of the plugin.

1) Your code:

maxLength: 50,

There is no such method called maxLength. It is spelled maxlength.

2) Your code:

required: validatePrices() == true

This needs to take a boolean or a function. It should look more like this...

required: function() {
    return validatePrices() == true;
}

3) Your code:

required:<fmt:message key="min.price.should.be.less.than.max"/>

I don't know if I'm supposed to automatically know this is your raw server-side code. Since you're only asking about client-side code, then you should only show your code as rendered in the browser. In that case, the messages should be defined more like this...

required:  "min price should be less than max"

jQuery Validation Submits non-ajax even when fails

1 Answers1