在模式引导程序中验证注册表单

Posted 2023-05-08

【中文标题】在模式引导程序中验证注册表单

【英文标题】：Validate signup form in modal bootstrap

【发布时间】：2017-10-19 16:52:35

【问题描述】：

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

我尝试安装引导验证程序，但它不起作用。

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

<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);
);

任何反馈都会有帮助

【问题讨论】：

控制台是否出现错误？

【参考方案1】：

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

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

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

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

【参考方案2】：

您的表单需要一个操作网址

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

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

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

【讨论】：

不@Raushan 我试过了。我的表单在模态框中，这就是我认为不起作用的原因。