如何使用Bootstrap Validator提交表单

时间:2014-11-02 14:19:01

标签: javascript c# asp.net twitter-bootstrap jqbootstrapvalidation

我在bootstrap asp.net项目中使用http://bootstrapvalidator.com/和visual studio。 我遇到的问题我永远无法获得验证按钮来实际验证,就像在示例中一样,当我开始在文本框中输入时它会很好地验证,但是当我点击按钮后面的示例时,它永远不会验证。

另一个问题是我不知道如何调用我的c#方法,它会在验证成功后从文本框中获取价值,我可以在按钮点击时调用我的方法,但我希望它在验证成功后发生

我正在寻找的是如何制作提交按钮验证字段然后调用我的c#方法的简单示例,该方法将从输入中读取值。

我在网上找不到单一的例子,我对javascript了解不多。

以下是我的一些测试代码

 <div class="form-group" id="nameEmail2">
        <div class="form-group">
            <label for="inputContactName" class="col-sm-5 control-label">Contact Name </label>
            <div class="col-sm-7">
                <input type="text" class="form-control" name="fullName1" id="TextBox1" placeholder="Contact Name" maxlength="50"/>
            </div>
        </div>
        <div class="form-group">
            <label for="inputContactEmail" class="col-sm-5 control-label">Contact Email <b>*</b></label>
            <div class="col-sm-7">
                <input type="text" class="form-control" name="email1" id="TextBox2" placeholder="Contact Email" maxlength="50"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-5 col-sm-offset-3">
                <button type="submit" runat="server" onserverclick="submitValidate"  class="btn btn-default">Validate</button>
            </div>
        </div>
        </div>



        <script type="text/javascript">
            $(function () {
                $('#nameEmail2').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },                        
                    fields: {
                        fullName1: {
                            validators: {
                                notEmpty: {
                                    // enabled is true, by default
                                    message: 'The full name is required and cannot be empty'
                                },
                                stringLength: {
                                    enabled: true,
                                    min: 8,
                                    max: 40,
                                    message: 'The full name must be more than 8 and less than 40 characters long'
                                },
                                regexp: {
                                    enabled: false,
                                    regexp: /^[a-zA-Z\s]+$/,
                                    message: 'The full name can only consist of alphabetical, number, and space'
                                }
                            }
                        },
                        email1: {
                            validators: {
                                emailAddress: {
                                    message: 'The value is not a valid email address'
                                }
                            }
                        }
                    }
                });
            });
        </script>

我删除了大多数asp对象,几乎没有任何东西在服务器上运行,但这对我的代码隐藏方法没什么帮助

protected void submitValidate(object sender, EventArgs e) 
{
    string contactName = Request.Form["fullName1"];
    string email = Request.Form["email1"];
    System.Diagnostics.Debug.Write("test",email);
}

1 个答案:

答案 0 :(得分:1)

找到了我自己的问题的答案 http://thuyvk.com/article/validate-form-su-dung-bootstrapvalidator-cho-website-aspnet-224 小心谷歌翻译,将代码转换成一些随机的HTML代码