使用备用按钮类型的JQM(jQueryMobile)HTML5模式验证(未提交)

时间:2011-04-18 13:18:26

标签: jquery html5 validation jquery-mobile

使用HTML5 Pattern进行表单字段验证,如果表单无效,如何停止提交?也许我应该问,如何创建自定义有效/无效的表单处理程序?

changePage()

上的

Documentation

$('#form-submit-button').click( function() {
    event.preventDefault(); // This is undefined                    

        // This submits my form and values via ajax, handles page transition
    $.mobile.changePage({
        url: 'request.php?page=one', 
        type: 'post', 
        data: $('form#test_form').serialize()
    },'slide',false,false);
}); 

示例HTML表单字段

<input type="text" 
       name="first_name" 
       id="first_name" 
       placeholder="First Name*" 
       pattern="[\w .-]" 
       required />

示例HTML按钮(不提交类型)

<input type="button" 
       data-theme="z" 
       data-icon="forward" 
       data-inline="true" 
       name="form-submit-button" 
       id="form-submit-button" 
       value="Next Step"/>

1 个答案:

答案 0 :(得分:1)

http://marxsoftware.blogspot.com/2011/01/html5-form-field-validation.html

根据这个,它不应该让你提交你的表格,直到它验证。