Fatal编程技术网
  • javascript/
  • Javascript 使用Ajax验证返回的表单不会在表单本身中显示错误，而是在新网页中打开结果

Javascript 使用Ajax验证返回的表单不会在表单本身中显示错误，而是在新网页中打开结果

javascript html ajax

Javascript 使用Ajax验证返回的表单不会在表单本身中显示错误，而是在新网页中打开结果,javascript,html,ajax,flask-wtforms,Javascript,Html,Ajax,Flask Wtforms,应用程序通过ajax调用验证并返回成功或错误结果，为简单起见，只有两个字段和提交按钮。 所需的结果是显示验证错误，与传统的Flask方法相同，但使用Ajax显示时，该字段在 它正在测试，字段为空并提交 表格为： class TestForm(FlaskForm): username = StringField('Username', validators=[Length(min=3, max=15, message='Username %(min)s minimun and %(max)

应用程序通过ajax调用验证并返回成功或错误结果，为简单起见，只有两个字段和提交按钮。
所需的结果是显示验证错误，与传统的Flask方法相同，但使用Ajax显示时，该字段在
它正在测试，字段为空并提交

表格为：

class TestForm(FlaskForm):
    username = StringField('Username', validators=[Length(min=3, max=15, message='Username %(min)s minimun and %(max)s maximum characters')])
    age = IntegerField('Age', validators=[NumberRange(min=14, message='Minumin age is %(min)s for login')])
意见是：

@clients.route('/nit_ajx', methods=['GET', 'POST'])
def nit_ajx():
    form = TestForm()
    if request.method == 'POST':
        if form.validate():
            return jsonify({'name' : 'OOT WOOT!'})
        return jsonify(form.errors), 400
    return render_template('newtest.html', form=form, title='Test')
网页测试包括js脚本：

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


</head>
<body>
<div class="container">
    <br><br><br>
    
    <form id="form" method="POST">
        {{ form.csrf_token }}
        <div class="text-danger my-2" id="csrf_token-error">
        </div>
        <div class="form-group">
            {{ form.username.label }}
            {{ form.username(class='form-control') }}
            <div id="username-error" class="invalid-feedback"></div>
        </div>
        <button class="btn btn-primary mb-2" id="username_upd">update username</button>
        <div class="form-group">
            {{ form.age.label }}
            {{ form.age(class='form-control') }}
            <div id="age-error" class="invalid-feedback"></div>
        </div>
        <button class="btn btn-primary" id="age_upd">update age</button>
    </form>
    <br>
    <div id="success-message" style="display: none;"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        const form = document.getElementById('form')
        const successMessage = document.getElementById('success-message')
        const fields = {
            csrf_token: {
                input: document.getElementById('csrf-token'),
                error: document.getElementById('csrf_token-error')
            },
            username: {
                input: document.getElementById('username'),
                error: document.getElementById('username-error')   
            },
            age: {
                input: document.getElementById('age'),
                error: document.getElementById('age-error')   
            }
        }
        $('form').on('submit', function(event) {
            $.ajax({
                data : {
                    csrf_token: fields.csrf_token.input.value,
                    username: fields.username.input.value,
                    age: fields.age.input.value
                },
                type : 'POST',
                url : '/nit_ajx'
            })
            .done(function(data) {
                if (data.error) {
                    const errors = data.error.json();
                    Object.keys(errors).forEach((key) => {
                        fields[key].input.classList.add('is-invalid');
                        fields[key].error.innerHTML = errors[key][0];
                    });
                }
                else {
                    successMessage.innerHTML = data.name.json();
                    form.style.display = 'none';
                    successMessage.style.display = 'block';
                }
        });

        event.preventDefault();
        });
    });
</script>
</body>
</html>


AJAX示例




{{form.csrf_token}
{{form.username.label}
{{form.username（class='form-control'）}
更新用户名
{{form.age.label}
{{form.age（class='form-control'）}
更新年龄


$（文档）.ready（函数（）{
const form=document.getElementById（'form'）
const successMessage=document.getElementById（'success-message'））
常量字段={
csrf_令牌：{
输入：document.getElementById（'csrf-token'），
错误：document.getElementById（'csrf\u token-error'）
},
用户名：{
输入：document.getElementById（'username'），
错误：document.getElementById（'username-error'）
},
年龄：{
输入：document.getElementById（'age'），
错误：document.getElementById（'age-error'））
}
}
$（'form'）。在（'submit'，函数（事件）{
$.ajax({
数据：{
csrf_标记：fields.csrf_标记.input.value，
用户名：fields.username.input.value，
年龄：fields.age.input.value
},
键入：“POST”，
url:“/nit_ajx”
})
.完成（功能（数据）{
if（data.error）{
const errors=data.error.json（）；
Object.key（错误）.forEach（（key）=>{
字段[key].input.classList.add（'is-invalid'）；
字段[key].error.innerHTML=errors[key][0]；
});
}
否则{
successessage.innerHTML=data.name.json（）；
form.style.display='none'；
successMessage.style.display='block'；
}
});
event.preventDefault（）；
});
});