การตรวจสอบความถูกต้องของฟิลด์ที่กำหนดเอง

ฉันมีรูปแบบเดียวที่มีช่องป้อนข้อมูลหลายช่อง ฉันใส่การตรวจสอบความถูกต้อง html5

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

เมื่อฉันส่งแบบฟอร์มโดยไม่กรอกกล่องข้อความนี้จะแสดงข้อความเริ่มต้นเช่น

"Please fill out this field"

ใครก็ได้โปรดช่วยฉันแก้ไขข้อความนี้

ฉันมีรหัสจาวาสคริปต์ที่จะแก้ไข แต่ใช้งานไม่ได้

$(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("");
        };
    }
})

การตรวจสอบอีเมลที่กำหนดเอง

ฉันมีรูปแบบ HTML ต่อไปนี้

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

ฉันต้องการข้อความตรวจสอบความถูกต้อง

ช่องที่ต้องกรอก:กรุณาป้อนที่อยู่อีเมลอีเมล
ผิด: 'testing @ .com' ไม่ใช่ที่อยู่อีเมลที่ถูกต้อง ( ที่นี่ป้อนที่อยู่อีเมลที่แสดงในกล่องข้อความ )

ฉันได้ลองสิ่งนี้แล้ว

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

ฟังก์ชั่นนี้ทำงานไม่ถูกต้องคุณมีวิธีอื่นในการทำเช่นนี้หรือไม่? มันจะได้รับการชื่นชม

ข้อมูลโค้ด

เนื่องจากคำตอบนี้ได้รับความสนใจเป็นอย่างมากนี่คือตัวอย่างข้อมูลที่กำหนดค่าได้ดีที่ฉันคิดขึ้น:

/**
  * @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);

การใช้

→ 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!';
  }
});

รายละเอียดเพิ่มเติม

• defaultText จะปรากฏขึ้นในตอนแรก
• emptyText จะปรากฏขึ้นเมื่ออินพุตว่างเปล่า (ถูกล้าง)
• invalidText จะปรากฏขึ้นเมื่อข้อมูลที่ป้อนถูกทำเครื่องหมายว่าไม่ถูกต้องโดยเบราว์เซอร์ (ตัวอย่างเช่นเมื่อไม่ใช่ที่อยู่อีเมลที่ถูกต้อง)

คุณสามารถกำหนดสตริงหรือฟังก์ชันให้กับคุณสมบัติทั้งสามอย่าง
หากคุณกำหนดฟังก์ชันฟังก์ชันจะสามารถยอมรับการอ้างอิงถึงองค์ประกอบอินพุต (โหนด DOM) และจะต้องส่งคืนสตริงซึ่งจะแสดงเป็นข้อความแสดงข้อผิดพลาด

ความเข้ากันได้

ผ่านการทดสอบใน:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (ใช้เวอร์ชันล่าสุด ณ วันที่ 28/08/2015)
• Firefox 40.0.3
• Opera 31.0.0

คำตอบเก่า

คุณสามารถดูการแก้ไขเก่าได้ที่นี่: https://stackoverflow.com/revisions/16069817/6

คุณสามารถทำได้โดยใช้แอตทริบิวต์ oninvalid ชำระรหัสสาธิตนี้

<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;
}

การสาธิต :

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

ลองสิ่งนี้:

$(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");
        };
    }
})

ฉันทดสอบสิ่งนี้ใน Chrome และ FF และใช้ได้กับทั้งสองเบราว์เซอร์

ผู้ชายฉันไม่เคยทำแบบนั้นใน HTML 5 แต่ฉันจะพยายาม ลองดูซอนี้

ฉันใช้ jQuery เหตุการณ์เนทีฟ HTML5 และคุณสมบัติและแอตทริบิวต์ที่กำหนดเองบนแท็กอินพุต (อาจทำให้เกิดปัญหาหากคุณพยายามตรวจสอบความถูกต้องของโค้ด) ฉันไม่ได้ทดสอบในทุกเบราว์เซอร์ แต่ฉันคิดว่ามันอาจใช้ได้

นี่คือรหัส JavaScript ตรวจสอบความถูกต้องของฟิลด์ด้วย 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 : "");
        };
    });
});

ดี นี่คือ html รูปแบบง่ายๆ:

<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>

แอตทริบิวต์requiredmessageนี้เป็นแอตทริบิวต์ที่กำหนดเองที่ฉันพูดถึง คุณสามารถตั้งค่าข้อความของคุณสำหรับแต่ละฟิลด์ที่ต้องการได้ซึ่งสาเหตุที่ jQuery จะได้รับจากมันเมื่อมันจะแสดงข้อความแสดงข้อผิดพลาด คุณไม่จำเป็นต้องตั้งค่าแต่ละฟิลด์บน JavaScript jQuery ก็ทำเพื่อคุณ regex ดูเหมือนจะดี (อย่างน้อยมันก็บล็อกคุณtesting@.com!

อย่างที่คุณเห็นเกี่ยวกับซอฉันทำการตรวจสอบความถูกต้องเพิ่มเติมของการส่งแบบฟอร์มเหตุการณ์ ( สิ่งนี้ไปที่ document. พร้อมด้วย ):

$("#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;
        }
    }
});

ฉันหวังว่าสิ่งนี้จะได้ผลหรือช่วยคุณได้

สิ่งนี้ใช้ได้ดีสำหรับฉัน:

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.");
                }
            }
        }
    }
});

และแบบฟอร์มที่ฉันใช้กับ (ตัดทอน):

<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>

คุณสามารถตั้งค่าตัวฟังเหตุการณ์สำหรับ 'ไม่ถูกต้อง' ในอินพุตทั้งหมดที่เป็นประเภทเดียวกันหรือเพียงรายการเดียวขึ้นอยู่กับสิ่งที่คุณต้องการจากนั้นตั้งค่าข้อความที่เหมาะสม

[].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);
    });

ส่วนที่สองของสคริปต์ข้อความความถูกต้องจะถูกรีเซ็ตเนื่องจากมิฉะนั้นจะไม่สามารถส่งแบบฟอร์มได้ตัวอย่างเช่นสิ่งนี้จะป้องกันไม่ให้ข้อความถูกทริกเกอร์แม้ว่าที่อยู่อีเมลจะได้รับการแก้ไขแล้วก็ตาม

นอกจากนี้คุณไม่จำเป็นต้องตั้งค่าช่องป้อนข้อมูลตามต้องการเนื่องจาก "ไม่ถูกต้อง" จะถูกเรียกใช้เมื่อคุณเริ่มพิมพ์ข้อมูลที่ป้อน

นี่คือซอสำหรับสิ่งนั้น: http://jsfiddle.net/napy84/U4pB7/2/ หวังว่าจะช่วยได้!

ใช้แอตทริบิวต์ "title" ในทุกแท็กอินพุตและเขียนข้อความลงไป

เพียงแค่ต้องได้รับองค์ประกอบและใช้เมธอด setCustomValidity

ตัวอย่าง

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

คุณสามารถใช้แอตทริบิวต์ oninvalid = "พร้อมกับ bingding this.setCustomValidity () eventListener!

นี่คือรหัสสาธิตของฉัน! (คุณสามารถเรียกใช้เพื่อตรวจสอบ!)

<!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>

ลิงค์อ้างอิง

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

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

คุณสามารถเพิ่มสคริปต์นี้เพื่อแสดงข้อความของคุณเอง

 <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>

สำหรับการตรวจสอบความถูกต้องอื่น ๆ เช่นรูปแบบไม่ตรงกันคุณสามารถเพิ่มเงื่อนไข if else เพิ่มเติมได้

ชอบ

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

มีเงื่อนไขความถูกต้องอื่น ๆ เช่น rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid