HTML5 formu gerekli özelliği. Özel doğrulama mesajı belirlensin mi?

Aşağıdaki HTML5 formunu aldım: 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"/>

Şu anda ikisi de boşken enter tuşuna bastığımda, "Lütfen bu alanı doldurun" yazan bir açılır kutu görünür. Bu varsayılan mesajı "Bu alan boş bırakılamaz" olarak nasıl değiştirebilirim?

EDIT: Ayrıca parola türü hata iletisinin türü olduğunu unutmayın *****. Bunu yeniden oluşturmak için kullanıcı adına bir değer verin ve gönder'e basın.

EDIT : Test için Chrome 10 kullanıyorum. Lütfen aynısını yapın

Kullanım 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("");
        };
    }
})

Ben vanilya JavaScript değiştirildi önerdiği gibi Mootools gelen @itpastorn yorumlarında, ancak gerekirse eşdeğer Mootools çalışmak gerekir.

Düzenle

Ben setCustomValidityaslında cevap zaman ne anlamak biraz farklı çalışır gibi burada kodu güncelledim . Eğer setCustomValidityboş dize dışında bir yapmaya hazır durumda geçersiz kabul edilecek alanın neden olur; bu nedenle geçerliliği test etmeden önce temizlemelisiniz, sadece ayarlayıp unutamazsınız.

Daha fazla düzenleme

Aşağıdaki @ thomasvdb'nin yorumunda belirtildiği gibi, invalidaksi takdirde bazı olaylarda özel geçerliliği temizlemeniz gerekir, aksi takdirde oninvalidtemizlemek için işleyiciden fazladan bir geçiş olabilir .

HTML5'te Özel Hata İletisini işlemek için kod

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

Bu bölüm önemlidir, çünkü kullanıcı yeni veri girdiğinde hata mesajını gizler:

oninput="this.setCustomValidity('')"

HTML5Etkinlik yardımıyla özel mesajları kontrol etmek çok basitoninvalid

İşte kod:

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

Bu çok önemlidir:

onvalid="this.setCustomValidity('')"

Not: Bu artık Chrome'da çalışmaz, diğer tarayıcılarda test edilmez. Aşağıdaki düzenlemelere bakın. Bu cevap tarihsel referans için burada bırakılıyor.

Doğrulama dizesinin gerçekten kodla ayarlanmaması gerektiğini düşünüyorsanız, giriş öğesinin başlık niteliğini "Bu alan boş bırakılamaz" olarak ayarlayabilirsiniz. (Chrome 10'da çalışır)

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

Bkz. Http://jsfiddle.net/kaleb/nfgfP/8/

Ve Firefox'ta bu özelliği ekleyebilirsiniz:

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

Düzenle

Aslında bu cevabı yazdığımdan beri bu değişmiş gibi görünüyor. Şimdi bir başlık eklemek geçerlilik mesajını değiştirmez, sadece mesaja bir ek ekler. Yukarıdaki keman hala geçerlidir.

Düzenle 2

Chrome artık Chrome 51'den itibaren title özelliğiyle hiçbir şey yapmıyor. Bunun hangi sürümde değiştiğinden emin değilim.

HTML5 oninvalidEtkinlik yardımıyla özel mesajları kontrol etmek çok basit

İşte kod:

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

setCustomValidityDoğru zamanda ayarlanarak ve ayarın kaldırılmasıyla doğrulama mesajı kusursuz bir şekilde çalışacaktır.

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

Bunun onchangeyerine oninputdaha genel kullandım ve değer JavaScript aracılığıyla bile herhangi bir koşulda değiştirildiğinde ortaya çıkar.

Hata mesajlarını değiştirmeyi ve çevirmeyi kolaylaştırmak için küçük bir kütüphane yaptım. Metinleri title, Chrome'da veya x-moz-errormessageFirefox'ta şu anda kullanılamayan hata türüne göre bile değiştirebilirsiniz . Git GitHub'dan üzerinde kontrol ve geri bildirimde bulunun.

Gibi kullanılır:

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

JsFiddle'da bir demo var .

Bunu deneyin, daha iyi ve test edilmiş:

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

Demo:

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

Bulduğum en kolay ve en temiz yol, özel hatanızı saklamak için bir veri özelliği kullanmaktır. Düğümü geçerlilik açısından test edin ve bazı özel html kullanarak hatayı işleyin.

le javascript

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

ve bazı süper HTML5

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

Her bir sembolün girişinde Google Chrome hata mesajlarını önlemenin çözümü:

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

Daha basit bir vanilya js sadece çözüm var:

Onay kutuları için:

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

Girişler için:

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

Uyarlanması Salar JSX için cevabını ve tepki, ben Seç sadece böyle davranmaz Tepki fark <input/>geçerliliği hususunda alanında. Görünüşe göre, yalnızca özel mesajı göstermek ve uygunsuz zamanlarda gösterilmesini engellemek için birkaç geçici çözüm gerekiyor.

Burada herhangi bir şey olursa, bir sorunla karşılaştım . İşte çalışan bir örneği olan bir CodeSandbox ve orada en önemli kod burada üretilir:

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

Tamam, oninvalid iyi çalışıyor ancak kullanıcı geçerli veriler girmiş olsa bile hata gösteriyor. Bu yüzden aşağıda mücadele etmek için kullandım, umarım sizin için de çalışır,

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

Sadece alana 'başlık' koyarak kolayca idare edilebilir:

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