Javascript 成功引导验证程序后的页面重定向

Javascript 成功引导验证程序后的页面重定向,javascript,php,codeigniter,validation,bootstrap-4,Javascript,Php,Codeigniter,Validation,Bootstrap 4,我正在使用codeigniter。在我的视图文件中,我有一个表单,我使用bootstrap validator检查字段验证。bootstrap validator验证表单字段是否正确。但问题是,我正在使用codeigniter。函数是在控制器中编写的。表单提交后,它应该重定向到在控制器中编写的函数上。我在这里当我在成功验证后单击submit按钮时遇到问题,它没有执行任何操作。它不会在写入新函数的控制器上重定向,也不会在成功验证后重定向页面。我使用的是javascript,而不是ajax 以下是我

我正在使用codeigniter。在我的视图文件中,我有一个表单,我使用bootstrap validator检查字段验证。bootstrap validator验证表单字段是否正确。但问题是,我正在使用codeigniter。函数是在控制器中编写的。表单提交后,它应该重定向到在控制器中编写的函数上。我在这里当我在成功验证后单击submit按钮时遇到问题,它没有执行任何操作。它不会在写入新函数的控制器上重定向,也不会在成功验证后重定向页面。我使用的是javascript,而不是ajax

以下是我的查看文件代码:

<form class="" data-toggle="validator" role="form" id="sms_form" method="Post" action="<?php echo site_url('SMS/sendIndividualMsg/'.$row->pro_id)?>">                       

    <div class="col-md-12">
                    <div class="form-group">
                    <label for ="message"><strong>Message</strong></label>
                    <textarea  class="form-control" id="comment_body" name="message" placeholder=" Your Message"></textarea>                

                    </div>
                    <div>

                    <?php echo form_submit(['name' => 'submit' ,'class' => 'btn btn-default' , 'value' => 'Send Message']); ?>


                    </div>
                    </div>
                </form>
用这个


$(“#sms_form”).bootstrapValidator({
//要使用反馈图标,请确保使用Bootstrap v3.1.0或更高版本
反馈图标:{
有效:“glyphicon glyphicon ok”,
无效:“glyphicon glyphicon删除”,
正在验证:“glyphicon glyphicon刷新”
},
字段:{
信息:{
验证器:{
regexp:{
regexp://^[a-zA-Z0-9\.\s]+$/,,
消息:“消息只能由字母、数字、点和下划线组成”
},
注意:{
信息:“请提供您的信息”
}
}
}          
}
.on('success.field.fv',函数(e,数据){
$(“表格”)。提交();
});
});

这不是一个有趣的游戏吗

长话短说

在加载jquery.JS文件(这都是引导JS文件的一部分)后,需要有JS。您当前的JS工作正常

在bootstrapValidator.js之后您也需要它,如果不需要,您需要将您的js包装在

$(document).ready(function () {
    // JS Code here if this is rendered before bootstrapValidator.min.js
})
这里的诀窍是观察浏览器开发工具中的控制台消息

只是说,它不工作,不看控制台消息是没有帮助的

如果你不知道我在说什么,我以后会澄清的

更新:这是我用来调查您的问题的测试代码

测试视图-视图/form_validator_View.php

<!doctype html>
<html lang="en">
<head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>

<div class="container">
    <form class="" data-toggle="validator" role="form" id="sms_form" method="Post" action="<?php echo site_url('sms/sendIndividualMsg/' . 1) ?>">
        <div class="form-group">
            <label for="message"><strong>Message</strong></label>
            <div class="col-md-12">
                <textarea class="form-control" id="message" name="message" placeholder=" Your Message"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-9 col-xs-offset-3">
                <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
            </div>
        </div>
    </form>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="//oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>


<script>
$(document).ready(function () {
    // JS Code here if this is rendered before bootstrapValidator.min.js
})
//    $(document).ready(function () {
        $('#sms_form').bootstrapValidator({
            // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                message: {
                    validators: {
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.\s]+$/,
                            message: 'The message can only consist of alphabetical, number, dot and underscore'
                        },
                        notEmpty: {
                            message: 'Please supply your message'
                        }
                    }
                }
            }
        });
//    })
</script>

</body>
</html>
<?php

class Sms extends CI_Controller {
    public function __construct() {
        parent::__construct();
        $this->load->helper('url');
        $this->load->helper('form');
    }

    public function index() {
        $this->load->view('form_validator_view');
    }

    public function sendIndividualMsg($id) {
        echo "The ID is $id";

        var_dump($_POST);
    }
}

你好,世界!
你好,世界!

Swadesh在写了这段代码之后,现在验证不起作用了什么是“success.fied.fv”它有任何id或内置变量吗?而不是.field.fv类使用你的类名什么是$(“form”)?我们写的是相同的“form”吗属性或这是表单的id?我不明白。请编辑我的代码在这里告诉我我在代码中编辑了什么您使用的是哪个版本的表单验证以及哪个版本的引导?
$(document).ready(function () {
    // JS Code here if this is rendered before bootstrapValidator.min.js
})
<!doctype html>
<html lang="en">
<head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>

<div class="container">
    <form class="" data-toggle="validator" role="form" id="sms_form" method="Post" action="<?php echo site_url('sms/sendIndividualMsg/' . 1) ?>">
        <div class="form-group">
            <label for="message"><strong>Message</strong></label>
            <div class="col-md-12">
                <textarea class="form-control" id="message" name="message" placeholder=" Your Message"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-9 col-xs-offset-3">
                <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
            </div>
        </div>
    </form>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="//oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>


<script>
$(document).ready(function () {
    // JS Code here if this is rendered before bootstrapValidator.min.js
})
//    $(document).ready(function () {
        $('#sms_form').bootstrapValidator({
            // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                message: {
                    validators: {
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.\s]+$/,
                            message: 'The message can only consist of alphabetical, number, dot and underscore'
                        },
                        notEmpty: {
                            message: 'Please supply your message'
                        }
                    }
                }
            }
        });
//    })
</script>

</body>
</html>
<?php

class Sms extends CI_Controller {
    public function __construct() {
        parent::__construct();
        $this->load->helper('url');
        $this->load->helper('form');
    }

    public function index() {
        $this->load->view('form_validator_view');
    }

    public function sendIndividualMsg($id) {
        echo "The ID is $id";

        var_dump($_POST);
    }
}