Xác thực tùy chỉnh trường bắt buộc

Tôi có một biểu mẫu với nhiều trường đầu vào. Tôi đã đặt xác nhận html5

<input type="text" name="topicName" id="topicName" required />

khi tôi gửi biểu mẫu mà không điền vào hộp văn bản này, nó sẽ hiển thị thông báo mặc định như

"Please fill out this field"

Bất cứ ai có thể vui lòng giúp tôi chỉnh sửa tin nhắn này?

Tôi có mã javascript để chỉnh sửa nó, nhưng nó không hoạt động

$(document).ready(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter Room Topic Title");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

Email xác thực tùy chỉnh

Tôi có biểu mẫu HTML sau

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />
</form>

Thông báo xác thực tôi muốn thích.

Trường bắt buộc: Vui lòng Nhập Địa chỉ Email
Sai Email: 'testing @ .com' không phải là Địa chỉ Email Hợp lệ. ( ở đây, địa chỉ email đã nhập được hiển thị trong hộp văn bản )

Tôi đã thử điều này.

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

Chức năng này không hoạt động bình thường, Bạn có cách nào khác để thực hiện việc này không? Nó sẽ được đánh giá cao.

Đoạn mã

Vì câu trả lời này thu hút rất nhiều sự chú ý, đây là một đoạn mã có thể định cấu hình tốt mà tôi đã nghĩ ra:

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://stackoverflow.com/a/16069817/603003
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
  */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

Sử dụng

→ jsFiddle

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

Thêm chi tiết

• defaultText được hiển thị ban đầu
• emptyText được hiển thị khi đầu vào trống (đã bị xóa)
• invalidText được hiển thị khi đầu vào được trình duyệt đánh dấu là không hợp lệ (ví dụ: khi đó không phải là địa chỉ email hợp lệ)

Bạn có thể gán một chuỗi hoặc một hàm cho từng thuộc tính trong số ba thuộc tính.
Nếu bạn gán một hàm, nó có thể chấp nhận một tham chiếu đến phần tử đầu vào (nút DOM) và nó phải trả về một chuỗi mà sau đó được hiển thị dưới dạng thông báo lỗi.

Khả năng tương thích

Đã thử nghiệm trong:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (sử dụng phiên bản cập nhật kể từ ngày 28/08/2015)
• Firefox 40.0.3
• Opera 31.0

Câu trả lời cũ

Bạn có thể xem bản sửa đổi cũ tại đây: https://stackoverflow.com/revisions/16069817/6

Bạn chỉ cần đạt được điều này bằng cách sử dụng thuộc tính oninvalid, hãy xem mã demo này

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

Codepen Demo: https://codepen.io/akshaykhale1992/pen/yLNvOqP

HTML:

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value == '') {
        textbox.setCustomValidity('Required email address');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity('please enter a valid email address');
    }
    else {
       textbox.setCustomValidity('');
    }
    return true;
}

Bản giới thiệu :

http://jsfiddle.net/patelriki13/Sqq8e/

Thử cái này:

$(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("Please enter Room Topic Title");
        };
    }
})

Tôi đã thử nghiệm điều này trong Chrome và FF và nó hoạt động trên cả hai trình duyệt.

Trời đất, tôi chưa bao giờ làm điều đó trong HTML 5 nhưng tôi sẽ thử. Hãy xem trò chơi này.

Tôi đã sử dụng một số sự kiện và thuộc tính gốc của jQuery, HTML5 và thuộc tính tùy chỉnh trên thẻ đầu vào (điều này có thể gây ra sự cố nếu bạn cố gắng xác thực mã của mình). Tôi đã không thử nghiệm trên tất cả các trình duyệt nhưng tôi nghĩ nó có thể hoạt động.

Đây là mã JavaScript xác thực trường với jQuery:

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

Đẹp. Đây là dạng html đơn giản:

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

Thuộc tính requiredmessagelà thuộc tính tùy chỉnh mà tôi đã nói đến. Bạn có thể đặt thông báo của mình cho từng trường bắt buộc vì jQuery sẽ nhận được từ đó khi nó hiển thị thông báo lỗi. Bạn không cần phải thiết lập từng trường ngay trên JavaScript, jQuery sẽ làm điều đó cho bạn. Regex đó có vẻ ổn (ít nhất nó chặntesting@.com ! Haha)

Như bạn có thể thấy trên fiddle, tôi thực hiện một xác thực bổ sung cho sự kiện biểu mẫu gửi ( điều này cũng xảy ra trên document.ready ):

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

Tôi hy vọng điều này hiệu quả hoặc giúp bạn trong anyway.

Công việc này tốt cho tôi:

jQuery(document).ready(function($) {
    var intputElements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < intputElements.length; i++) {
        intputElements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                if (e.target.name == "email") {
                    e.target.setCustomValidity("Please enter a valid email address.");
                } else {
                    e.target.setCustomValidity("Please enter a password.");
                }
            }
        }
    }
});

và biểu mẫu tôi đang sử dụng với (bị cắt bớt):

<form id="welcome-popup-form" action="authentication" method="POST">
    <input type="hidden" name="signup" value="1">
    <input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
    <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
    <input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>

Bạn có thể thực hiện việc này khi thiết lập trình xử lý sự kiện cho 'không hợp lệ' trên tất cả các đầu vào cùng loại hoặc chỉ một, tùy thuộc vào những gì bạn cần, rồi thiết lập thông báo thích hợp.

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
    emailElement.addEventListener('invalid', function() {
        var message = this.value + 'is not a valid email address';
        emailElement.setCustomValidity(message)
    }, false);

    emailElement.addEventListener('input', function() {
        try{emailElement.setCustomValidity('')}catch(e){}
    }, false);
    });

Phần thứ hai của tập lệnh, thông báo hợp lệ sẽ được đặt lại, vì nếu không sẽ không thể gửi biểu mẫu: ví dụ: điều này ngăn thông báo được kích hoạt ngay cả khi địa chỉ email đã được sửa.

Ngoài ra, bạn không phải thiết lập trường nhập theo yêu cầu, vì 'không hợp lệ' sẽ được kích hoạt khi bạn bắt đầu nhập đầu vào.

Đây là một mẹo nhỏ cho điều đó: http://jsfiddle.net/napy84/U4pB7/2/ Hy vọng điều đó sẽ hữu ích!

Sử dụng thuộc tính "title" trong mọi thẻ đầu vào và viết thông báo trên đó

Chỉ cần lấy phần tử và sử dụng phương thức setCustomValidity.

Thí dụ

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');

bạn có thể chỉ cần sử dụng thuộc tính oninvalid = " , với bingding this.setCustomValidity () eventListener!

Đây là mã demo của tôi! (Bạn có thể chạy nó để kiểm tra!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oninvalid</title>
</head>
<body>
    <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
        <input type="email" placeholder="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

liên kết tham khảo

http://caniuse.com/#feat=form-validation

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

Bạn có thể thêm tập lệnh này để hiển thị thông điệp của riêng bạn.

 <script>
     input = document.getElementById("topicName");

            input.addEventListener('invalid', function (e) {
                if(input.validity.valueMissing)
                {
                    e.target.setCustomValidity("Please enter topic name");
                }
//To Remove the sticky error message at end write


            input.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        });

</script>

Đối với các xác nhận khác như mẫu không khớp, bạn có thể thêm bổ sung nếu điều kiện khác

giống

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

có các điều kiện hợp lệ khác như rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid