Question

我找到了一个很好的jquery脚本，用于美国邮政编码验证：http://igorgladkov.com/resources/demos/jquery.validator/demos/zip_us_validation.html 如果条目有效，则脚本写入有效，否则写入无效，如您所见:) 现在我想以我的形式使用它：

 <form action="search-by-zip.php" method="POST"">
        <span>zip-code:<input type='text' name='zipcode' value='' size='8' maxlength='7' /></span>
        <span>Distance:
            <select id="radius" name="radius">
                <option value="5">5 miles</option>
                <option value="10">10 miles</option>
                <option selected="selected" value="25">25 miles</option>
                <option value="50">50 miles</option>
            </select>
        </span>
        <input type="submit" value="Find Head Shops" name="find">
    </form>

我想这一定是可能的吗？而不是获取有效消息我只想提交我的表单，并在同一页面上列出结果。我应该怎么做。我对javascript不太熟悉。

Answer 1

查看http://bassistance.de/jquery-plugins/jquery-plugin-validation/ ..使用jquery，易于使用，自定义，正确的文档，演示和tutorilas ... 只需要加载相关的js文件并调用

 $('#yourFormId').validate();

Answer 2

你可以做到这一点：

$('#zipcode').validator({
        format: 'zipUS',
        invalidEmpty: true,
        correct: function() {
            $('#validation_result').text('VALID');//Not needed
            $('form').submit();
        },
        error: function() {
            $('#validation_result').text('INVALID');
        }
    });

    $('#submit_button').click(function(e) {
        $('#zipcode').validator('validate');
    });

将您的HTML更改为：

 <form action="search-by-zip.php" method="POST"">
        <span>zip-code:<input type='text' id='zipcode' name='zipcode' value='' size='8' maxlength='7' /></span><br />
        <span id="validation_result" class="result"></span><br />
        <span>Distance:
            <select id="radius" name="radius">
                <option value="5">5 miles</option>
                <option value="10">10 miles</option>
                <option selected="selected" value="25">25 miles</option>
                <option value="50">50 miles</option>
            </select>
        </span>
        <input type="button" id='submit_button' value="Find Head Shops" name="find">
    </form>

我添加 validation_resut span ，将提交按钮更改为简单按钮，并在文本输入中添加 ID

我修复了一些小错误，它有效......测试here

如何在我的表单中使用此jquery验证器

2 个答案: