HTML5 प्रपत्र आवश्यक विशेषता। कस्टम सत्यापन संदेश सेट करें?

Question

मुझे निम्न HTML5 फ़ॉर्म मिला है: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

वर्तमान में जब मैं हिट करता हूं, जब वे दोनों खाली होते हैं, तो एक पॉपअप बॉक्स "कृपया इस फ़ील्ड को भरें" कहते हुए दिखाई देता है। मैं उस डिफ़ॉल्ट संदेश को "इस फ़ील्ड को खाली नहीं छोड़ा जा सकता" कैसे बदलूंगा?

संपादित करें: यह भी ध्यान दें कि टाइप पासवर्ड फ़ील्ड का त्रुटि संदेश बस है *****। इसे पुनः बनाने के लिए यूज़रनेम को एक मूल्य और हिट सबमिट करें।

संपादित करें : मैं परीक्षण के लिए Chrome 10 का उपयोग कर रहा हूं। कृपया ऐसा ही करें

Comments

ओह, इंसाने खाली-पासवर्ड सत्यापन संदेश के लिए +1 = / यह कैसे हुआ क्यूए पास, मुझे आश्चर्य है ...

— डेविड कहते हैं कि मोनिका

क्यों न केवल ब्राउज़र डिफ़ॉल्ट संदेश को स्वीकार करें? उपयोगकर्ताओं द्वारा देखी जाने वाली हर दूसरी साइट के लिए उपयोगकर्ता वही देखते हैं, जो आप अपने उपयोगकर्ताओं को एक गैर-मानक संदेश बनाकर भ्रमित करेंगे। (Google ने संभवतः आपके द्वारा किए गए शब्दों के निर्धारण में अधिक UX मूल्यांकन और परीक्षण का प्रबंधन किया है!)।

— क्रिस डिक

@ChrisV बहुभाषी साइटों के बारे में क्या?

— इनमेनजा

मेरे मामले में मैं जाँच करना चाहता हूँ कि मूल्य पोस्ट करने से पहले एक संख्या है, लेकिन मैं प्रकार = "संख्या" विशेषता (कारणों के लिए) का उपयोग नहीं कर सकता। इसलिए मैं संख्या और वैकल्पिक दशमलव के लिए जाँच करने के लिए पैटर्न विशेषता सेट करता हूँ जो संदेश देता है। , "त्रुटि पर अनुरोधित प्रारूप से मेल खाएं।" बल्कि मैंने कहा, "सुनो हमें एक नंबर बक देना चाहिए।"

— क्रिस्टोफर

Answer 1

उपयोग करें setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

मैंने टिप्पणियों में @itpastorn द्वारा सुझाए गए मूटूल से वेनिला जावास्क्रिप्ट को बदल दिया , लेकिन यदि आवश्यक हो तो आपको मुटूल के समकक्ष काम करने में सक्षम होना चाहिए।

संपादित करें

setCustomValidityजब मैंने मूल रूप से उत्तर दिया था, तो मैंने जो कुछ समझा था, उससे थोड़ा अलग तरीके से यहां कोड को अपडेट किया है । यदि setCustomValidityखाली स्ट्रिंग के अलावा किसी अन्य चीज़ पर सेट किया जाता है तो यह फ़ील्ड को अमान्य माना जाएगा; इसलिए आपको इसे वैधता का परीक्षण करने से पहले स्पष्ट करना चाहिए, आप इसे केवल निर्धारित नहीं कर सकते हैं और भूल सकते हैं।

आगे संपादित करें

जैसा कि नीचे @ thomasvdb की टिप्पणी में बताया गया है, आपको बाहर की किसी घटना में कस्टम वैधता को साफ़ करने की आवश्यकता है invalidअन्यथा oninvalidइसे साफ़ करने के लिए हैंडलर के माध्यम से एक अतिरिक्त पास हो सकता है।

Comments

मैंने यह कोशिश की लेकिन अभी भी एक त्रुटि है। यदि आप फ़ील्ड को खाली छोड़ते हैं तो यह संदेश दिखाता है, फिर फ़ील्ड में कुछ दर्ज करें लेकिन यह अब एक खाली संदेश दिखाता है और कार्रवाई निष्पादित नहीं होती है। यदि आप अब फिर से बटन पर क्लिक करते हैं, तो यह गुजर जाएगा।

— thomasvdb

@thomasvdb inputईवेंट पर खाली स्ट्रिंग पर कस्टम वैधता सेट करने का प्रयास करें । फिलहाल यह साफ invalidहो गया है कि अगर घटना को अंजाम दिया जाता है।

— रॉबर्ट

यह वास्तव में समाधान है। यह @hleinone के समाधान के साथ मिला। जवाब देने के लिए धन्यवाद!

— thomasvdb

दस्तावेज़ के लोड होने की प्रतीक्षा करने के लिए उपरोक्त समाधान केवल JQuery का उपयोग करता है। बाकी सब शुद्ध जेएस और डोम है। SetCustomValidity का समर्थन करने के लिए पर्याप्त आधुनिक ब्राउज़र को DOMContentLoaded घटना का समर्थन करना चाहिए, जिसका अर्थ है कि JQuery की आवश्यकता नहीं है, अगर इसका उपयोग किसी और चीज़ के लिए नहीं किया जाता है।

— itpastorn

@ Lai32290 क्योंकि आप वास्तविक DOM ऑब्जेक्ट को एक्सेस नहीं कर रहे हैं। $("")केवल एक ही है, भले ही वस्तुओं की एक सरणी देता है। $("")[i]सबसे अधिक संभावना है कि आप क्या चाहते हैं।

— नूह पासलाक्वा

Answer 2

HTML5 में Custom Error Message को हैंडल करने के लिए कोड है

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />

जब उपयोगकर्ता नया डेटा इनपुट करता है तो यह भाग महत्वपूर्ण है क्योंकि यह त्रुटि संदेश छुपाता है:

oninput="this.setCustomValidity('')"

Comments

फ़ायरफ़ॉक्स 29.0 और क्रोम 34.0.1847.137 पर पूरी तरह से काम करता है।

— फर्नांडो कोश

एकदम सही और एफएफ 38 में अब तक। ईमेल सत्यापन में बग को ठीक करता है यदि केवल oninvalid () का उपयोग किया जाता है।

— andrew

आईपैड और न ही आईफोन में सफारी में काम नहीं कर रहा है। Chrome डेस्कटॉप में अपेक्षा के अनुरूप कार्य करना।

— नबील

@ somnath-kadam यह एक गलती है या आपने जानबूझकर oninput = "setCustomValidity ('')" oninput = "this.setCustomValidity ('')" के बजाय किया

— tormit

सबसे महत्वपूर्ण के रूप में oninput = "setCustomValidity ('')" को चिह्नित करने के लिए धन्यवाद। इससे मेरा दिन बच गया।

— सिंहप्रदीप

Answer 3

HTML5ईवेंट की मदद से कस्टम संदेशों को नियंत्रित करना बहुत सरल हैoninvalid

यहाँ कोड है:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

यह सबसे महत्वपूर्ण है:

onvalid="this.setCustomValidity('')"

Comments

अन्य मान्यताओं के साथ-साथ पैटर्न, मिनट / अधिकतम मान आदि की भी जांच करें

— Jaider

यह फ़ायरफ़ॉक्स में एक बग का कारण बनता है जहां यह ताज़ा होने पर मान्य होता है, फिर भी परिवर्तन और सुधार पर विफल रहता है।

— 18 फरवरी को रयान चार्मले

onchange="this.setCustomValidity('')"बग का उपयोग करके @RyanCharmley चला जाएगा। नीचे मेरे जवाब की जाँच करें।

— सालार

यदि यह काम नहीं करता है (यह सफारी में नहीं है, उदाहरण के लिए), oninputइसके बजाय का उपयोग करें onvalid।

— जिमोथी

@ जिमी इस बारे में सही oninputहै, अधिक सार्वभौमिक समाधान है, onvalidमेरे लिए क्रोम में भी काम नहीं किया।

— ThisGuyCantEven

Answer 4

नोट: यह अब क्रोम में काम नहीं करता है, अन्य ब्राउज़रों में परीक्षण नहीं किया गया है। नीचे संपादन देखें। यह उत्तर ऐतिहासिक संदर्भ के लिए यहां छोड़ा जा रहा है।

यदि आपको लगता है कि सत्यापन स्ट्रिंग को वास्तव में कोड द्वारा सेट नहीं किया जाना चाहिए, तो आप "इस फ़ील्ड को खाली नहीं छोड़ा जा सकता है" पढ़ने के लिए इनपुट तत्व की शीर्षक विशेषता सेट कर सकते हैं। (क्रोम 10 में काम करता है)

title="This field should not be left blank."

Http://jsfiddle.net/kaleb/nfgfP/8/ देखें

और फ़ायरफ़ॉक्स में, आप इस विशेषता को जोड़ सकते हैं:

x-moz-errormessage="This field should not be left blank."

संपादित करें

जब से मैंने मूल रूप से यह उत्तर लिखा है तब से यह बदल गया है। अब एक शीर्षक जोड़ने से वैधता संदेश नहीं बदलता है, यह सिर्फ संदेश में एक परिशिष्ट जोड़ता है। ऊपर दिए गए फ़िफ़ल अब भी लागू होते हैं।

संपादित करें २

क्रोम अब क्रोम 51 के शीर्षक विशेषता के साथ कुछ भी नहीं करता है। मुझे यकीन नहीं है कि यह किस संस्करण में बदल गया है।

Comments

यह वास्तविक संदेश सामग्री को परिवर्तित नहीं करता है।

— वेस्ले मर्च

जिस समय मैंने इसका परीक्षण किया था।

— kzh

मेरी गलती, ओपी ने क्रोम 10 को निर्दिष्ट किया, मैं एफएफ 5 पर था। हटा दिया गया, मेरी क्षमायाचना। वाह, क्रोम में वह त्रुटि संदेश अब तक देखी गई सबसे बदसूरत चीज है।

— वेस्ले मर्च

फ़ायरफ़ॉक्स में घोषणात्मक त्रुटि संदेशों के लिए विशेषता का उपयोग करें:x-moz-errormessage="This field should not be left blank."

— robertc

यह "कृपया इस फ़ील्ड को भरें" के तहत एक वर्णनात्मक संदेश जोड़ता है।

— मैग्ने

Answer 5

HTML5 oninvalidईवेंट की मदद से कस्टम संदेशों को नियंत्रित करना बहुत सरल है

यहाँ कोड है:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

Comments

एक बार रिवाइज इनपुट को नियंत्रित करने के लिए वैधता संदेश को रिक्त करना आवश्यक है, पहले निष्पादित वैधता संदेश सभी क्षेत्रों के लिए प्रदर्शित किया जाएगा। Oninput = "setCustomValidity ('')" को जब भी setCustomValidity () कहते हैं, जोड़ें। सोमनाथ के जवाब का +1।

— तरंग

Answer 6

setCustomValidityसही समय में सेटिंग और परेशान करने से, सत्यापन संदेश त्रुटिपूर्ण रूप से काम करेगा।

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

मैंने इसका उपयोग किया जिसके onchangeबजाय oninputयह अधिक सामान्य है और तब होता है जब मूल्य किसी भी हालत में जावास्क्रिप्ट के माध्यम से बदल दिया जाता है।

Comments

यह स्वीकृत उत्तर होना चाहिए। निम्न ब्राउज़रों में विंडोज 10 1709 में काम किया: क्रोम 66.0.3359.139 64 बिट, फ़ायरफ़ॉक्स 59.0.3 (64-बिट), इंटरनेट एक्सप्लोरर 11.431.16299.0, एज 41.16299.402.0। MacOS 10.13.2 में सफारी 11.0 (13604.1.38.1.6) में काम किया। Chrome 66.0.3359.158 में Android 4.4.4 में काम किया गया। जेएसएक्स रास्ते की तलाश करने वालों के लिए onInvalid={(e) => { e.target.setCustomValidity('foo') }} onChange={(e) => { e.target.setCustomValidity('') }}:।

— गाइटर

परिशिष्ट: eअशक्त हो सकता है, उदाहरण के लिए जब कोई विकल्प रिएक्ट सेलेक्ट फ़ील्ड से निकाला जाता है। उस के लिए जाँच करने के लिए मत भूलना।

— ग्वारीटर

इरेटा: रिएक्ट सिलेक्ट के साथ इसका उपयोग करने के लिए, आपको पास करना होगा onChangeऔर onInvalidजैसेinputProps={{ onInvalid: …, onChange: …, }}

— गाइटर

परिशिष्ट: type='email'इलाज के लिए थोड़ा और अधिक कठिन है, भले ही इनपुट वैध हो, यहां तक ​​कि setCustomValidityसेट customError: trueका उपयोग करना e.target.validity। मैं इसे ठीक करने का एक तरीका खोजने की कोशिश कर रहा हूं।

— गुइटर

@GuiRitter क्या आपने इसका पता लगाया?

— एविल जोर्डन

Answer 7

मैंने त्रुटि संदेशों को बदलने और अनुवाद करने में आसानी के लिए एक छोटी सी लाइब्रेरी बनाई है। तुम भी त्रुटि प्रकार से ग्रंथों को बदल सकते हैं जो वर्तमान titleमें क्रोम या x-moz-errormessageफ़ायरफ़ॉक्स में उपयोग करके उपलब्ध नहीं है । GitHub पर इसे देखें , और प्रतिक्रिया दें।

यह इस तरह प्रयोग किया जाता है:

<input type="email" required data-errormessage-value-missing="Please input something">

वहाँ jsFiddle पर एक डेमो उपलब्ध है ।

Comments

धन्यवाद! स्वीकृत उत्तर में एक टिप्पणी के रूप में उल्लेखित मेरी छोटी बग को हल किया।

— thomasvdb

अच्छा answe, क्योंकि ओपी Google क्रोम का उपयोग कर रहा है; यह आप IE एज में काम नहीं करेगा

— CoderHawk

Answer 8

इस एक, इसके बेहतर और परीक्षण की कोशिश करें:

HTML:

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           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/

Comments

हे .... अच्छा समाधान है, लेकिन प्रकार = ईमेल does not काम सफारी ब्राउज़र में। एक नजर है w3schools.com/html/html_form_input_types.asp

— भावना मल्होत्रा

हां, यह सफारी के लिए समर्थित नहीं है, लेकिन मैंने सेट कस्टम सत्यापन संदेश के लिए एक उत्तर दिया।

— रिकिन पटेल

Answer 9

मैंने जो सबसे आसान और साफ तरीका खोजा है, वह है अपनी कस्टम त्रुटि को संग्रहीत करने के लिए डेटा विशेषता का उपयोग करना। वैधता के लिए नोड का परीक्षण करें और कुछ कस्टम HTML का उपयोग करके त्रुटि को संभालें।

ले जावास्क्रिप्ट

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

और कुछ सुपर एचटीएमएल 5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

Comments

केवल अक्षरों को कहने में त्रुटि के बावजूद, पैटर्न अंतरिक्ष और एपोस्ट्रोफ की अनुमति देता है? इसके अलावा, A-z'[', '\', ']', '^', '_' और '`' को अनुमति देता है।

— लॉरेंस Dol

Answer 10

प्रत्येक प्रतीक पर इनपुट पर Google Chrome त्रुटि संदेशों को रोकने का समाधान:

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
  <input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

<form method="post" action="#">
  <p></p>
  <label for="text_number_1">Here you will see no error messages on input:</label><br>
  <input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

Answer 11

मेरे पास एक सरल वेनिला जेएस केवल समाधान है:

चेकबॉक्स के लिए:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

इनपुट्स के लिए:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};

Answer 12

अनुकूल सालार के JSX का जवाब और प्रतिक्रिया, मैंने देखा है कि प्रतिक्रिया का चयन सिर्फ एक की तरह व्यवहार नहीं करता है <input/>मान्यता के बारे में क्षेत्र। जाहिरा तौर पर, केवल कस्टम संदेश दिखाने के लिए और असुविधाजनक समय पर इसे दिखाने से रोकने के लिए कई वर्कअराउंड की आवश्यकता होती है।

मैंने यहां एक मुद्दा उठाया है , अगर यह कुछ भी मदद करता है। यहाँ एक काम उदाहरण के साथ एक CodeSandbox है, और सबसे महत्वपूर्ण कोड यहाँ पुन: प्रस्तुत किया गया है:

Hello.js

import React, { Component } from "react";
import SelectValid from "./SelectValid";

export default class Hello extends Component {
  render() {
    return (
      <form>
        <SelectValid placeholder="this one is optional" />
        <SelectValid placeholder="this one is required" required />
        <input
          required
          defaultValue="foo"
          onChange={e => e.target.setCustomValidity("")}
          onInvalid={e => e.target.setCustomValidity("foo")}
        />
        <button>button</button>
      </form>
    );
  }
}

SelectValid.js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";

export default class SelectValid extends Component {
  render() {
    this.required = !this.props.required
      ? false
      : this.state && this.state.value ? false : true;
    let inputProps = undefined;
    let onInputChange = undefined;
    if (this.props.required) {
      inputProps = {
        onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
      };
      onInputChange = value => {
        this.selectComponent.input.input.setCustomValidity(
          value
            ? ""
            : this.required
              ? "foo"
              : this.selectComponent.props.value ? "" : "foo"
        );
        return value;
      };
    }
    return (
      <Select
        onChange={value => {
          this.required = !this.props.required ? false : value ? false : true;
          let state = this && this.state ? this.state : { value: null };
          state.value = value;
          this.setState(state);
          if (this.props.onChange) {
            this.props.onChange();
          }
        }}
        value={this && this.state ? this.state.value : null}
        options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
        placeholder={this.props.placeholder}
        required={this.required}
        clearable
        searchable
        inputProps={inputProps}
        ref={input => (this.selectComponent = input)}
        onInputChange={onInputChange}
      />
    );
  }
}

Answer 13

ठीक है, oninvalid अच्छी तरह से काम करता है लेकिन उपयोगकर्ता द्वारा वैध डेटा दर्ज किए जाने पर भी यह त्रुटि दिखाता है। इसलिए मैंने इससे निपटने के लिए नीचे का उपयोग किया है, आशा है कि यह आपके लिए भी काम करेगा,

oninvalid="this.setCustomValidity('Your custom message.')" onkeyup="setCustomValidity('')"

Answer 14

क्षेत्र के साथ सिर्फ 'शीर्षक' लगाकर आसानी से संभाला जा सकता है:

<input type="text" id="username" required title="This field can not be empty"  />

Comments

यह प्रदर्शित त्रुटि संदेश को नहीं बदलता है। यह केवल इनपुट पर एक शीर्षक दिखाता है जब आप होवर करते हैं।

— मथिउ डुमौलिन

यह इनपुट फ़ील्ड के लिए कुछ चेतावनी दिखाने के लिए "शीर्षक" की सही प्रयोज्यता नहीं है।

— सज्जाद सरेरी