自定义验证消息在“ type = url”上覆盖标准CSS

凯尔

如果用户未在前端搜索网址,我希望外观如下所示

在此处输入图片说明

目前,此my表单使用type="url"来提供验证,而无需进行正则表达式。

这是我当前表格的副本,并附有发帖请求

<form action="POST" id="Submit">
                <div class="inner-form">
                    <div class="input-field first-wrap">
                        <div class="svg-wrapper">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "></path>
                  </svg>
                        </div>
                        <input id="search" type="url" name="url" placeholder="Paste a domain here" />
                    </div>

                    <div class="input-field second-wrap">
                        <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">SEARCH       </button>
                    </div>
                </div>

            </form>

这是表格后面的我的脚本标签

let progress = 0;
const maxTime = 5000; // 5 seconds
let interval = null;


    function searchIt() {

        let form = document.querySelector('form')
        console.log(form)

        form.addEventListener('submit', async(e) => {
         // onclick or the event that start the call
            interval = setInterval(() => {
            progress = progress >= 100 ? 100 : progress + 1
            document.getElementById('myprogress').style.width = `${progress}%`


        // end interval and wait at 100%
            if(progress == 100) clearInterval(interval);
            }, maxTime/100)
            document.getElementById('loadingcontainer').style.display = ""
            e.preventDefault()
            let urlIN = form.url.value
            let url = encodeURIComponent(urlIN)
            console.log(url)
            try {
                const data = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        url: url
                    })


                }).then(res => {
                    document.open()
                    res.text().then(function(text) {

                        document.write(text)
                        // Hide the progressbar, stop the timer and reset progress
                    clearInterval(interval);
                    progress = 0;
                    document.getElementById('myprogress').style.width = "0%"
                    document.getElementById('loadingcontainer').style.display = "none";

                    });

                })


            } catch (err) {
                console.error(err)
            }

        })



    }

如何在模型中实现指定的设计?我似乎一辈子都拿不到这个

斯蒂芬·P

最初在页面加载时运行的代码的唯一部分是声明变量的以下三个语句:

let progress = 0;
const maxTime = 5000; // 5 seconds
let interval = null;

and the declaration of your function searchIt() — note that the function is not being run, it is only being declared, so the code within that function such as form.addEventListener('submit', ...) has not executed yet.

Meanwhile, you have a submit button with an inline event handler declared

<button id="button" class="btn-search" onclick="searchIt()"
        value="press" type="submit">SEARCH</button>

so when "SEARCH" is clicked, then searchIt is run and the submit event-handler is attached, but by then it's too late — you're already in the process of submitting the form, so your attempt to override the browser's handling of validation isn't even attached yet.

In the "script tag after the form" you need to do let form = document.querySelector('form') and form.addEventListener('submit',...) outside of the searchIt() function, before it is run, such as right after the line let interval = null;

In addition, the use of async directly on the event listener for the submit handler — form.addEventListener('submit', async(e) => ...) — makes the whole handler asynchronous, so the call in there to e.preventDefault() will likely not occur to prevent the default submit handling. The only part of the code you really want to be async is the fetch() and its handling of the fetch results. For that reason I would separate it into its own function so the submit handler becomes, in pseudo-code:

form.addEventListener('submit', function(e) {
        e.preventDefault();
        doValidation();
        if (it is valid) call the async function;
}

You mention in a comment that "The default type=url css is still showing up." — you need to tell the browser not to do its validation, by using the novalidate attribute on the form

<form action="POST" id="Submit" novalidate>

最后,我将更改用于某些ID的名称,以更描述事物用途该按钮的ID为“按钮”,它描述的是什么东西,一个按钮,但未描述其用途。该按钮有什么作用?可能会启动搜索<button id="search">-可能是在该字段中输入要搜索的目标URL的地方,因此<input id="targeturl"...>
在下面的示例中我更改了几个名称。


这是讨论更改的页面。请注意,将“真实”工作封装在一个函数中,您可能希望将maxTime,progress和interval变量移至该函数中。

<!DOCTYPE html>
<html>
    <head>
        <title>Kyle's URL field</title>
        <style>
        #errors {
            display: none;
        }
        #errors.has-error {
            display: block;
        }
        #errors #message {
            color: #e45b3f;
        }
        </style>
    </head>
    <body>
        <main>

            <form action="POST" id="searchform" novalidate>
                <div class="inner-form">
                    <div class="input-field first-wrap">
                        <div class="svg-wrapper">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "></path>
                            </svg>
                        </div><!-- svg-wrapper -->
                        <input id="targeturl" type="url" name="url"
                               placeholder="Paste a domain here"
                               required pattern="^https?://www\..*$"
                               >
                    </div><!-- input-field first-wrap -->

                    <div class="input-field second-wrap">
                        <button id="search" class="btn-search" value="press" type="submit">SEARCH</button>
                    </div>
                    <div id="errors">
                        <span id="message"></span>
                    </div>
                </div><!-- inner-form -->
            </form>

        </main>
    </body>

    <script>
    const maxTime = 5000; // 5 seconds
    let progress = 0;
    let interval = null;
    
    const form = document.querySelector('form');
    const urlField = document.getElementById('targeturl');

    const errors = document.getElementById('errors');
    const message = document.getElementById('message');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        console.log('handling the form submit here');

        const valid = urlField.checkValidity();
        console.log(`valid = ${valid}`);

        if (valid) {
            clearError();
            console.log('about to run the async portion');
            doTheAsyncStuff(e);
        }
        else {
            console.log('twiddle with the DOM to display your custom error message');
            showError("Yikes! That's not a valid URL");
        }
    });

    function showError(msg) {
        message.innerText = msg;
        errors.classList.add('has-error');
    }
    function clearError() {
        message.innerText = '';
        errors.classList.remove('has-error');
    }

    async function doTheAsyncStuff(e) {
        console.log('now running the async function "doTheAsync"');
    }
    </script>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自定义CSS被引导CSS覆盖

来自分类Dev

HTML-添加oninput覆盖自定义oninvalid消息

来自分类Dev

Kendo Grid-验证消息未显示在网格的自定义编辑器上

来自分类Dev

自定义验证指令将覆盖其他验证

来自分类Dev

仅在sign_in上显示自定义消息

来自分类Dev

在身份验证上发送自定义参数

来自分类Dev

验证错误的自定义错误消息:在rails上的ruby上的validates_length_of:maximum和:minimum

来自分类Dev

客户端列表上的MVC自定义验证

来自分类Dev

DevForce 2012上的自定义验证程序

来自分类Dev

Primefaces CSS覆盖自定义CSS

来自分类Dev

Activiti表单字段上的自定义验证

来自分类Dev

控制器方法上的自定义验证器

来自分类Dev

laravel上的自定义验证消息

来自分类Dev

使用自定义CSS抛出我自己的验证消息| 网址验证

来自分类Dev

下拉式自定义验证消息在MVC中被覆盖

来自分类Dev

CodeIgniter自定义验证将覆盖核心验证

来自分类Dev

MVC3上的自定义范围验证器

来自分类Dev

使用$ {protocol}进行JavaScript RegExp自定义URL验证

来自分类Dev

带有AngularJs自定义验证的CSS

来自分类Dev

如何覆盖自定义操作中出现的错误消息

来自分类Dev

自定义验证指令会覆盖其他验证

来自分类Dev

jQuery表单URL验证自定义消息

来自分类Dev

在身份验证上发送自定义参数

来自分类Dev

Laravel上的自定义身份验证

来自分类Dev

Laravel注册表单上的自定义验证

来自分类Dev

使用插件对 URL 进行 JQuery 验证需要自定义

来自分类Dev

覆盖表单的 clean 方法以自定义错误消息

来自分类Dev

覆盖自定义验证

来自分类Dev

Jquery 验证自定义 css 复选框

Related 相关文章

热门标签

归档