How to perform additional client-side validation on the comment form on AnQiCMS frontend using JavaScript?

As an experienced website operation expert, I am well aware that website user experience and data security are equally important.In such a flexible and efficient content management system as AnQiCMS, front-end validation is a key factor in improving user experience and reducing invalid requests.Today, we will delve into how to cleverly use JavaScript on the AnQiCMS frontend to add additional client-side validation to our comment form, allowing users to receive immediate feedback before submitting information, thereby optimizing the entire interaction process.

Why do we need frontend client validation?

Firstly, let's talk about the importance of front-end client-side validation.You might ask, doesn't AnQiCMS already have a rigorous verification mechanism on the backend?Indeed, server-side validation is the last line of defense in ensuring data security and system stability, any submitted data must pass backend validation.However, client validation plays a different role:

1. Improve user experience:Imagine, the user has filled in a lot of information, clicked submit only to find that a field format is incorrect, at this time it is necessary to reload the page, wait for the backend to respond, which undoubtedly brings frustration.Client validation can immediately point out errors, allowing users to make immediate corrections, greatly enhancing the fluidity and satisfaction of operations.
2. Reduce server load:Client validation filters out some information that does not meet the requirements before the data reaches the server.This means that the server does not need to process these invalid requests, thereby reducing the server load and improving overall performance.
3. Reduce network transmission:Invalid data is intercepted before submission, avoiding unnecessary network transmission, which is particularly important for mobile devices or users with poor network conditions.

Of course, please be sure to remember that client-side validation is just a 'friendly reminder' to enhance user experience, and it cannot replace the security of backend validation.Malicious users can bypass frontend validation and directly send requests to the backend, therefore, server-side validation must always be strict.

Understand the AnQiCMS comment form structure

In AnQiCMS, the comment form is usually through{% guestbook fields %}This tag is used to render. The strength of this tag lies in its ability to dynamically generate corresponding HTML form elements based on the fields you configure in the background "Website Message" feature.For example, you may have configured username, contact information, message content, and some custom fields such as "Your company", "Products of interest", and so on.

When{% guestbook fields %}When the tag is parsed, it outputs something like this HTML structure (a simplified example):

<form method="post" action="/guestbook.html" id="guestbookForm">
    <!-- ... 省略其他字段 ... -->
    <div>
        <label>用户名</label>
        <div>
            <input type="text" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
        </div>
    </div>
    <div>
        <label>联系方式</label>
        <div>
            <input type="text" name="contact" required placeholder="请填写您的手机号或微信" autocomplete="off">
        </div>
    </div>
    <div>
        <label>留言内容内容</label>
        <div>
            <textarea name="content" placeholder="" id="comment-content-field" rows="5"></textarea>
        </div>
    </div>
    <!-- ... 其他自定义字段 ... -->
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>

Please note that each form element has anameProperty, this is the key we use in JavaScript to locate and get its value.typeproperties such astext/number/textareaandrequiredProperties also give us some basic hints. The form'sactionProperties usually point to/guestbook.htmlThis is the built-in interface of AnQiCMS.

Implement client-side validation strategies through JavaScript.

Now, let's build our client-side validation logic step by step.

Step 1: Prepare the template file and JavaScript file

First, you need to locate the page file in your website template that contains the message form, usuallyguestbook/index.html(Based ondesign-director.mdThe document's conventions). In this HTML file, we must ensure that the comment form is rendered correctly, and we also need to include our JavaScript validation script.

Assuming you will place your custom JavaScript file inpublic/static/js/the directory, namedguestbook-validation.js. Then, before theguestbook/index.htmlTemplate's</body>tag, you can use the following method to include:

<!-- guestbook/index.html 模板文件片段 -->
<form method="post" action="/guestbook.html" id="guestbookForm">
    <!-- ... 您的表单字段由 {% guestbook fields %} 标签生成 ... -->
</form>

<script src="{% system with name='TemplateUrl' %}/js/guestbook-validation.js"></script>

We used here{% system with name='TemplateUrl' %}Use labels to dynamically retrieve the static file address of the template and ensure the path is correct.

Step two: obtain form elements and bind event listeners.

Inpublic/static/js/guestbook-validation.jsIn the file, we first need to get the form itself and prevent its default submission behavior so that we can perform custom validation before submission.

document.addEventListener('DOMContentLoaded', function() {
    const guestbookForm = document.getElementById('guestbookForm'); // 获取表单元素

    if (guestbookForm) {
        guestbookForm.addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            let isValid = true; // 标志位，表示表单是否通过验证

            // 在这里添加您的验证逻辑

            if (isValid) {
                // 如果所有验证都通过，则手动提交表单
                guestbookForm.submit();
            } else {
                // 如果验证失败，可以给出提示，例如滚动到第一个错误位置
                alert('请检查您的输入，有错误需要修正。');
            }
        });
    }
});

DOMContentLoadedThe event ensures that the script is executed only after the DOM is fully loaded, preventing errors caused by HTML elements not being ready.

Step 3: Write detailed validation logic and provide user feedback.

Now, we can addguestbookForm.addEventListener('submit', ...)specific validation rules in the callback function. To provide a better user experience, we should display error messages next to each field that needs validation.

We can write some auxiliary functions to display and clear error messages:

`javascript // guestbook-validation.js file content example

// Helper function: display error message function showError(field, message) {

let errorElement = field.nextElementSibling; // 假设错误消息元素紧跟在输入字段后面
if (!errorElement || !errorElement.classList.contains('error-message')) {
    errorElement = document.createElement('div');
    errorElement.classList.add('error-message');
    field.parentNode.insertBefore(errorElement, field.nextElementSibling); // 插入到字段后面
}
errorElement.textContent = message;
errorElement.style.color = 'red';
field.classList.add('is-invalid'); // 添加一个类名表示字段无效

}

// Helper function: clear error message function clearError(field) {

const errorElement = field.nextElementSibling;
if (errorElement && errorElement.classList.contains('error-message')) {
    errorElement.textContent = '';
    errorElement.style.color = '';
}
field.classList.remove('is-invalid');

}

document.addEventListener('DOMContentLoaded', function() {

const guestbookForm = document.getElementById('guestbookForm');

if (guestbookForm) {
    guestbookForm.addEventListener('submit', function(event) {
        event.preventDefault();
        let isValid = true;

        // 1. 验证用户名 (name="user_name")
        const userNameField = guestbookForm.querySelector('[name="user_name"]');
        if (userNameField) {
            clearError(userNameField);
            if (userNameField.value.trim() === '') {
                show