Boş giriş alanı için JavaScript doğrulaması

101

Bu giriş alanına <input name="question"/>sahibim, gönder düğmesine tıkladığınızda gönderirken IsEmpty işlevini çağırmak istiyorum.

Aşağıdaki kodu denedim ama işe yaramadı. herhangi bir tavsiye?

<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=unicode" />
  <meta content="CoffeeCup HTML Editor (www.coffeecup.com)" name="generator" />
</head>

<body>


  <script language="Javascript">
    function IsEmpty() {

      if (document.form.question.value == "") {
        alert("empty");
      }
      return;
    }
  </script>
  Question: <input name="question" /> <br/>

  <input id="insert" onclick="IsEmpty();" type="submit" value="Add Question" />

</body>

</html>
Snippet'i genişlet

javascript 
— Eyla
kaynak
Geçersiz bir cevabı kabul ettiniz . Bir girdi (veya metin alanı) her zaman bir Dize döndürdüğü için boş değerin kontrol edilmesi tuhaftır. Ayrıca, satır içi JavaScript kullanmamalısınız. Ayrıca körü körüne kullanmamalısınız return false... vs vs
— Roko C. Buljan

Yanıtlar:

125 

<script type="text/javascript">
  function validateForm() {
    var a = document.forms["Form"]["answer_a"].value;
    var b = document.forms["Form"]["answer_b"].value;
    var c = document.forms["Form"]["answer_c"].value;
    var d = document.forms["Form"]["answer_d"].value;
    if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") {
      alert("Please Fill All Required Field");
      return false;
    }
  }
</script>

<form method="post" name="Form" onsubmit="return validateForm()" action="">
  <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
  <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
  <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
  <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>
Snippet'i genişlet

— Sk Mourya
kaynak
2
'onsubmit = "return validate ()"' değiştirilmesi gerekiyor. validate, işlevin adı değildir. 'Onsubmit = "return validateForm ()"' olmalıdır
— tazboy
3
Cevabı ve OP'nin şüphesini açıklamak en iyisi olacaktır.
— Vishal
7
Bu kabul aslında geçersizdir. İfadedeki virgüller ifyalnızca son kontrolün döndürülmesine neden olur: stackoverflow.com/a/5348007/713874
— Bing
36

Burada çalışma örneğine bakın

Gerekli <form>öğeyi kaçırıyorsunuz . Kodunuzun nasıl olması gerektiği aşağıda açıklanmıştır:

function IsEmpty() {
  if (document.forms['frm'].question.value === "") {
    alert("empty");
    return false;
  }
  return true;
}
<form name="frm">
  Question: <input name="question" /> <br />
  <input id="insert" onclick="return IsEmpty();" type="submit" value="Add Question" />
</form>
Snippet'i genişlet

— Sarfraz
kaynak
Formlardaki tüm alanlar için bunu yapmanın bir yolu var mı?
— sparecycle
35

Bir giriş alanında boşluklar olabilir , bunu önlemek istiyoruz. String.prototype.trim ()
kullanın :

function isEmpty(str) {
    return !str.trim().length;
}

Misal:

const isEmpty = str => !str.trim().length;

document.getElementById("name").addEventListener("input", function() {
  if( isEmpty(this.value) ) {
    console.log( "NAME is invalid (Empty)" )
  } else {
    console.log( `NAME value is: ${this.value}` );
  }
});
<input id="name" type="text">
Snippet'i genişlet

— Roko C. Buljan
kaynak
1
Boş ve "" dışında, kodum bu parçayı da özlüyordum. Benim için çalıştı. Teşekkürler Roko.
— Pedro Sousa
18

Kullanıcının javascript'i devre dışı bırakması durumunda gerekli özniteliği eklemek istiyorum:

<input type="text" id="textbox" required/>

Tüm modern tarayıcılarda çalışır.

— Atıf Tarık
kaynak
10 
if(document.getElementById("question").value.length == 0)
{
    alert("empty")
}
— Jak Samun
kaynak
7

Giriş öğenize bir kimlik "soru" ekleyin ve ardından şunu deneyin:

   if( document.getElementById('question').value === '' ){
      alert('empty');
    }

Mevcut kodunuzun çalışmamasının nedeni, içinde bir FORM etiketinizin olmamasıdır. Ayrıca, "ad" kullanılarak yapılan arama, kullanımdan kaldırıldığı için önerilmez.

@Paul Dixon'ın bu gönderideki cevabına bakın: "ad" özelliği <a> bağlantı etiketleri için eski olarak kabul ediliyor mu?

— Rajat
kaynak
1 
if(document.getElementById("question").value == "")
{
    alert("empty")
}
— Kenneth J
kaynak
1
... <input>öğede "id" özelliği yoktur ; bu yalnızca IE'de çalışır çünkü IE bozuktur.
— Pointy
üzgünüm, bir kimlik olduğunu, document.getElementsByName ("soru") [0] .value veya öğeye bir kimlik ekle
— Kenneth J
1

Giriş öğesine bir kimlik etiketi eklemeniz yeterlidir ... yani:

ve JavaScript'inizdeki öğenin değerini kontrol edin:

document.getElementById ("soru"). değer

Oh ya, firefox / firebug alın. JavaScript yapmanın tek yolu bu.

— Bal
kaynak
0

Ben kullanmaları nedeniyle Çözümümün aşağıda ES6 olduğunu consthepinizin yerine ES5 tercih ederseniz constile var.

const str = "       Hello World!        ";
// const str = "                     ";

checkForWhiteSpaces(str);

function checkForWhiteSpaces(args) {
    const trimmedString = args.trim().length;
    console.log(checkStringLength(trimmedString))     
    return checkStringLength(trimmedString)        
}

// If the browser doesn't support the trim function
// you can make use of the regular expression below

checkForWhiteSpaces2(str);

function checkForWhiteSpaces2(args) {
    const trimmedString = args.replace(/^\s+|\s+$/gm, '').length;
    console.log(checkStringLength(trimmedString))     
    return checkStringLength(trimmedString)
}

function checkStringLength(args) {
    return args > 0 ? "not empty" : "empty string";
}
Snippet'i genişlet

— Kingston Fortune
kaynak
0 

<pre>
       <form name="myform" action="saveNew" method="post" enctype="multipart/form-data">
           <input type="text"   id="name"   name="name" /> 
           <input type="submit"/>
       </form>
    </pre>

<script language="JavaScript" type="text/javascript">
  var frmvalidator = new Validator("myform");
  frmvalidator.EnableFocusOnError(false);
  frmvalidator.EnableMsgsTogether();
  frmvalidator.addValidation("name", "req", "Plese Enter Name");
</script>
Snippet'i genişlet

Yukarıdaki kodu kullanmadan önce gen_validatorv31.js dosyasını eklemeniz gerekir

— Ravindra Bohra
kaynak
0

Tüm yaklaşımları birleştirerek şöyle bir şey yapabiliriz:

const checkEmpty = document.querySelector('#checkIt');
checkEmpty.addEventListener('input', function () {
  if (checkEmpty.value && // if exist AND
    checkEmpty.value.length > 0 && // if value have one charecter at least
    checkEmpty.value.trim().length > 0 // if value is not just spaces
  ) 
  { console.log('value is:    '+checkEmpty.value);}
  else {console.log('No value'); 
  }
});
<input type="text" id="checkIt" required />
Snippet'i genişlet

Değerleri gerçekten kontrol etmek istiyorsanız, bunu sunucuda yapmanız gerektiğini unutmayın, ancak bu, bu sorunun kapsamı dışındadır.

— A. Meshu
kaynak
0

Gönderdikten sonra her girişi gözden geçirebilir ve boş olup olmadığını kontrol edebilirsiniz.

let form = document.getElementById('yourform');

form.addEventListener("submit", function(e){ // event into anonymous function
  let ver = true;
  e.preventDefault(); //Prevent submit event from refreshing the page

  e.target.forEach(input => { // input is just a variable name, e.target is the form element
     if(input.length < 1){ // here you're looping through each input of the form and checking its length
         ver = false;
     }
  });

  if(!ver){
      return false;
  }else{
     //continue what you were doing :)
  } 
})
— Kakiz
kaynak
0 

<script type="text/javascript">
  function validateForm() {
    var a = document.forms["Form"]["answer_a"].value;
    var b = document.forms["Form"]["answer_b"].value;
    var c = document.forms["Form"]["answer_c"].value;
    var d = document.forms["Form"]["answer_d"].value;
    if (a == null || a == "", b == null || b == "", c == null || c == "", d == null || d == "") {
      alert("Please Fill All Required Field");
      return false;
    }
  }
</script>

<form method="post" name="Form" onsubmit="return validateForm()" action="">
  <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
  <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
  <textarea cols="30" rows="2" name="answer_c" id="c"></textarea>
  <textarea cols="30" rows="2" name="answer_d" id="d"></textarea>
</form>
Snippet'i genişlet

— Rizki Fauji
kaynak
Merhaba, bir çözüm sunarken, çözümünüzün gelecekteki okuyuculara yardımcı olabilecek sorunu çözmesinin bir nedenini belirtmek harika olur.
— Ehsan Mahmud
0

Javascript düğmesine tıklandığında giriş mesajını HTML doğrulamasını kullanarak özelleştirme

function msgAlert() {
  const nameUser = document.querySelector('#nameUser');
  const passUser = document.querySelector('#passUser');

  if (nameUser.value === ''){
    console.log('Input name empty!');
    nameUser.setCustomValidity('Insert a name!');
  } else {
    nameUser.setCustomValidity('');
    console.log('Input name ' + nameUser.value);
  }
}

const v = document.querySelector('.btn-petroleo');
v.addEventListener('click', msgAlert, false);
.container{display:flex;max-width:960px;}
.w-auto {
    width: auto!important;
}
.p-3 {
    padding: 1rem!important;
}
.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.mb-2, .my-2 {
    margin-bottom: .5rem!important;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
.d-inline-block {
    display: inline-block!important;
}
.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.mr-sm-2, .mx-sm-2 {
    margin-right: .5rem!important;
}
label {
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    color: #007081;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.x-input {
    background-color: #eaf3f8;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
}
.login-input {
    border: none !important;
    width: 100%;
}
.p-4 {
    padding: 1.5rem!important;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button, input {
    overflow: visible;
    margin: 0;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}
.col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.mt-1, .my-1 {
    margin-top: .25rem!important;
}
.mt-2, .my-2 {
    margin-top: .5rem!important;
}
.mb-2, .my-2 {
    margin-bottom: .5rem!important;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-petroleo {
    background-color: #007081;
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 30px;
    letter-spacing: 2px;
}
.btn-xg {
    padding: 20px 100px;
    width: 100%;
    display: block;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: textfield;
    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
}
<div class="container">
              <form name="myFormLogin" class="w-auto p-3 mw-10">
                <div class="form-row align-items-center">
                  <div class="col w-auto p-3 h-auto d-inline-block my-2">
                    <label class="mr-sm-2" for="nameUser">Usuário</label><br>
                    <input type="text" class="form-control mr-sm-2 x-input login-input p-4" id="nameUser"
                           name="nameUser" placeholder="Name" required>
                  </div>
                </div>
                <div class="form-row align-items-center">
                  <div class="col w-auto p-3 h-auto d-inline-block my-2">
                    <label class="mr-sm-2" for="passUser">Senha</label><br>
                    <input type="password" class="form-control mb-3 mr-sm-2 x-input login-input p-4" id="passUser"
                           name="passUser" placeholder="Password" required>
                    <div class="help">Esqueci meu usuário ou senha</div>
                  </div>
                </div>
                <div class="form-row d-flex align-items-center">
                  <div class="col-lg-12 my-1 mt-2 mb-2">
                    <button type="submit" value="Submit" class="btn btn-petroleo btn-lg btn-xg btn-block p-4">Entrar</button>
                  </div>
                </div>
                <div class="form-row align-items-center d-flex">
                  <div class="col-lg-12 my-1">
                    <div class="nova-conta">Ainda não é cadastrado? <a href="">Crie seu acesso</a></div>
                  </div>
                </div>
              </form>
            </div>
Snippet'i genişlet

— Wemerson Nino
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.