Question

我输入了带有type = url的fild，但是它不起作用。这是html代码。

<div>
        <label for="contact_website">Website:</label>
        <input type="url" id="contact_website" name="website"></input>
        <span class="error">A valid url is required</span>                              </div>

这是这里的jquery代码。

$('#contact_website').on('input', function() {
                    var input=$(this);
                    if (input.val().substring(0,4)=='www.'){
                        input.val('http://www.'+input.val().substring(4));
                    }
                    var re = /\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
                    var is_url=re.test(input.val());
                    if(is_url){
                        input.removeClass("invalid").addClass("valid");
                    }else{
                        input.removeClass("valid").addClass("invalid");
                    }
                });

Answer 1

您可以使用模糊function $('#contact_website').blur(function(){})

$('#contact_website').blur(function(){
                    var input=$(this);
                    if (input.val().substring(0,4)=='www.'){
                        input.val('http://www.'+input.val().substring(4));
                    }
                    var re = /\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
                    
                    var is_url=re.test(input.val());
                    
                    if(is_url){
                        input.removeClass("invalid").addClass("valid");
                    }else{
                        input.removeClass("valid").addClass("invalid");
                    }
                });

.invalid{ border:1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <label for="contact_website">Website:</label>
        <input type="url" id="contact_website" name="website"></input>
        <span class="error">A valid url is required</span>                              </div>

Answer 2

感谢支持，好的，我找到了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
             <form id="contact" method="post" action="">
                <!-- Name -->
                <div>
                    <label for="contact_name">Name:</label>
                    <input type="text" id="contact_name" name="name"></input>
                    <span class="error">This field is required</span>
                </div>
                <!-- Email -->
                <div>
                    <label for="contact_email">Email:</label>
                    <input type="email" id="contact_email" name="email"></input>
                    <span class="error">A valid email address is required</span>                
                </div>                      
                <!--Website -->
                <div>
                    <label for="contact_website">Website:</label>
                    <input type="url" id="contact_website" name="website"></input>
                    <span class="error">A valid url is required</span>                              
                </div>                      
                <!-- Message -->
                <div>
                    <label for="contact_message">Message:</label>
                    <textarea id="contact_message" name="message"></textarea>
                    <span class="error">This field is required</span>                                               
                </div>                  
                <!-- Submit Button -->
                <div id="contact_submit">               
                    <button type="submit">Submit</button>
                </div>
            </form>

这是CSS

<style>
        #contact label{
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        #contact_submit{
            padding-left: 100px;
        }
        #contact div{
            margin-top: 1em;
        }
        textarea{
            vertical-align: top;
            height: 5em;
        }

        .error{
            display: none;
            margin-left: 10px;
        }       

        .error_show{
            color: red;
            margin-left: 10px;
        }

        input.invalid, textarea.invalid{
            border: 2px solid red;
        }

        input.valid, textarea.valid{
            border: 2px solid green;
        }
    </style>

这是JQuery

<script>
        $(document).ready(function() {
                <!--Name must be fill -->
                $('#contact_name').on('input', function() {
                    var input=$(this);
                    var is_name=input.val();
                    if(is_name){
                        input.removeClass("invalid").addClass("valid");
                    }else{
                        input.removeClass("valid").addClass("invalid");
                    }
                });

                <!--Email must be a email -->
                $('#contact_email').on('input', function() {
                    var input=$(this);
                    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                    var is_email=re.test(input.val());
                    if(is_email){
                        input.removeClass("invalid").addClass("valid");
                    }else{
                        input.removeClass("valid").addClass("invalid");
                    }
                });



                <!--Website must be a website -->
                $('#contact_website').on('input', function() {
                    var input=$(this);
                    if (input.val().substring(0,4)=='www.'){
                        input.val('http://www.'+input.val().substring(4));
                    }
                    var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
                    var is_url=re.test(input.val());

                    if(is_url){
                        input.removeClass("invalid").addClass("valid");
                    }else{
                        input.removeClass("valid").addClass("invalid");
                    }
                });

                <!--Message cant be blank -->
                $('#contact_message').keyup(function(event) {
                    var input=$(this);
                    var message=$(this).val();
                    console.log(message);
                    if(message){
                        input.removeClass("invalid").addClass("valid");
                    }
                    else{
                        input.removeClass("valid").addClass("invalid");
                    }   
                });

            <!-- After Form Submitted Validation -->
            $("#contact_submit button").click(function(event){
                var form_data=$("#contact").serializeArray();
                var error_free=true;
                for (var input in form_data){
                    var element=$("#contact_"+form_data[input]['name']);
                    var valid=element.hasClass("valid");
                    var error_element=$("span", element.parent());
                    if (!valid){
                        error_element.removeClass("error").addClass("error_show"); 
                        error_free=false;
                    }else{
                        error_element.removeClass("error_show").addClass("error");
                    }
                }
                if (!error_free){
                    event.preventDefault(); 
                }
                else{
                    alert('No errors: Form will be submitted');
                }
            });
        });
    </script>

使用网站名称进行表单验证时出错

2 个答案: