验证模态引导程序中的注册表单

时间:2017-05-19 14:01:19

标签: javascript php jquery twitter-bootstrap validation

我正在尝试在模态框中验证我的签名表单,但每次提交模式时都会关闭并刷新页面。

我尝试安装bootstrap验证程序,但它不起作用。

此外,我无法收到我的错误消息,如果例如电子邮件是空的,仍然每次重新加载并关闭我的盒子。

<form id="IDofmyform" action="#" method="POST">
   <div class="form-group">
     <input type="text" name="reg_fullname" class="form-control-form " id="exampleInputEmaillog" placeholder="Full Name" value="<?php
                        if(isset($_SESSION['reg_fullname'])){
                            echo $_SESSION['reg_fullname'];
                        }
                        ?>">
                        <?php if(in_array('Your name is too long. Please include only firstname and lastname', $error_array)) echo 'Your name is too long. Please include only firstname and lastname';
                        else if(in_array('Please enter a valid name' , $error_array)) echo 'Please enter a valid name'; ?>
  </div>    
  <div class="form-group">
    <input type="email" name="reg_email" class="form-control-form " id="exampleInputEmaillog" placeholder="Email" value="<?php
                        if(isset($_SESSION['reg_email'])){
                            echo $_SESSION['reg_email'];
                        }
                        ?>">
</div>
<div class="form-group">
<input type="email" name="reg_email2" class="form-control-form " id="exampleInputEmaillog" placeholder="Confirm Email" value="<?php
                        if(isset($_SESSION['reg_email2'])){
                            echo $_SESSION['reg_email2'];
                        }
                        ?>">
                        <?php if(in_array('Email already in use', $error_array)) echo 'Email already in use';
                        else if(in_array('Invalid Email Format', $error_array)) echo 'Invalid Email Format';
                        else if(in_array('Emails do not match', $error_array)) echo 'Emails do not match'; ?>
</div>
<div class="form-group">
<input type="password" name="reg_password" class="form-control-form " id="exampleInputPasswordpas" placeholder="Password">
</div>    
<div class="form-group">
<input type="password" name="reg_password2" class="form-control-form " id="exampleInputPasswordpas" placeholder="Confirm Password">
                        <?php if(in_array('Your passwords do not match', $error_array)) echo 'Your passwords do not match';
                        else if(in_array('Special characters like "£%^*() are not allowed', $error_array)) echo 'Special characters like "£%^*() are not allowed';
                        else if(in_array('Your password must be between 5 and 20 character', $error_array)) echo 'Your password must be between 5 and 20 character'; ?>
</div>    
<div class="row">   
 <div class="col-md-12">    
   <div class="checkbox">
     <label>
        <input type="checkbox">I’d like to receive emails
     </label>
   </div>
 </div>      
</div>
<button type="submit" name="register_button" class="btn-lgin">Signup</button>
</form>

这里是与Validator.js一起使用的js

$('#IDofmyform').bootstrapValidator({
message: 'This value is not valid', 
feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
fields: {
    first_name: {
        validators: {
            notEmpty: {
                message: "You're required to fill in a first name!"
                      }, // notEmpty
            regexp: {
                regexp: /^[A-Za-z\s.'-]+$/,
                message: "Alphabetical characters, hyphens and spaces"
            }
                    } // validators
              },  // firstname
    last_name: {
        validators: {
            notEmpty: {
                message: "You've forgotten to provide your last name!"
                      } // notEmpty
                    } // validators
              },  // lastname
    email: {
        validators: {
            notEmpty: {
                message: "An email address is mandatory."
                      }, // notEmpty
            emailAddress: {
                message: "This is not a valid email address"
                            } // emailAddress         
                    } // validators
              },  // email
    comments: {
        validators: {
            notEmpty: {
                message: "Are you sure? No comment?"
                      } // notEmpty
                    } // validators
              } //comments
    } // fields
    });
 $('#myModal').on('shown.bs.modal', function() {
 $('#contactform').bootstrapValidator('resetForm', true);
});

任何反馈都会有所帮助

2 个答案:

答案 0 :(得分:1)

您需要通过添加onclick处理程序来捕获提交按钮上的click事件。使用jQuery,您可以这样做:

$("<button selector>").click(function(){
    <handler code>
});

在处理程序中,您调用preventDefault()以使提交操作不会发生。你也打电话给stopPropagation()

然后验证表单并在表单上调用submit,或者如果一切正常,您可以使用登录数据触发ajax请求。或者如果没有,则在模态中显示错误消息。

答案 1 :(得分:0)

您的表单需要操作网址

 Document extendedDocument = Globals.Factory.GetVstoObject(Globals.ThisAddIn.Application.ActiveDocument);

或者如果您在同一页面上发布数据,请像这样使用

<form action="action_url" method="POST">