खाली इनपुट क्षेत्र के लिए जावास्क्रिप्ट सत्यापन

95

मेरे पास यह इनपुट फ़ील्ड है <input name="question"/> है जिसे मैं सबमिट बटन पर क्लिक करते समय IsEmpty फ़ंक्शन को कॉल करना चाहता हूं।

मैंने नीचे दिए कोड की कोशिश की, लेकिन काम नहीं किया। कोई सलाह?

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

स्निपेट का विस्तार करें

javascript

— Eyla
स्रोत

आपने एक अमान्य उत्तर स्वीकार कर लिया । अशक्त के लिए जाँच करना अजीब है क्योंकि एक इनपुट (या टेक्सारिया) हमेशा एक स्ट्रिंग देता है। इसके अलावा, आपको इनलाइन जावास्क्रिप्ट का उपयोग नहीं करना चाहिए। इसके अलावा, आपको आँख बंद करके return false... आदि का उपयोग नहीं करना चाहिए

— रोको सी। बुल्जन

121

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

स्निपेट का विस्तार करें

— Sk Mourya
स्रोत

2

'ओनसुबमिट = "रिटर्न वैलिडेट ()" "को बदलने की जरूरत है। सत्यापन कार्य का नाम नहीं है। यह 'ऑनसुबमिट = "रिटर्न

— वैलिडेटफार्म

3

उत्तर और ओपी के संदेह को स्पष्ट करना सबसे अच्छा होगा।

— विशाल

7

यह स्वीकृत वास्तव में अमान्य है। ifबयान में अल्पविराम केवल अंतिम चेक वापस करने का कारण होगा: stackoverflow.com/a/5348007/713874

— बिंग

35

काम का उदाहरण यहां देखें

आप आवश्यक <form>तत्व को याद कर रहे हैं । यहां बताया गया है कि आपका कोड कैसा होना चाहिए:

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>

स्निपेट का विस्तार करें

— सरफराज
स्रोत

क्या रूपों में सभी क्षेत्रों के लिए ऐसा करने का कोई तरीका है?

— स्पेयर साइकिल

34

एक इनपुट फ़ील्ड में व्हाट्सएप हो सकता है , हम इसे रोकना चाहते हैं। String.prototype.trim () का
उपयोग करें :

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

उदाहरण:

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

स्निपेट का विस्तार करें

— रोको सी। बुल्जन
स्रोत

1

अशक्त और "" के अलावा, मेरा कोड मैं इस टुकड़े को भी याद कर रहा था। इसने मेरे लिए काम किया। धन्यवाद रोको।

— पेड्रो सोसा

17

मैं उपयोगकर्ता के अक्षम जावास्क्रिप्ट मामले में आवश्यक विशेषता जोड़ना चाहूंगा:

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

यह सभी आधुनिक ब्राउज़रों पर काम करता है।

— आतिफ तारिक़
स्रोत

10

if(document.getElementById("question").value.length == 0)
{
    alert("empty")
}

— जक समन
स्रोत

7

अपने इनपुट तत्व में एक आईडी "प्रश्न" जोड़ें और फिर यह प्रयास करें:

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

आपके वर्तमान कोड के काम न करने का कारण यह है कि आपके पास वहां कोई FORM टैग नहीं है। इसके अलावा, "नाम" का उपयोग करते हुए देखने की अनुशंसा नहीं की गई है क्योंकि इसके पदावनत नहीं किया गया है।

इस पोस्ट में @Paul डिक्सन का उत्तर देखें: क्या </ b> नाम 'विशेषता को <a> एंकर टैग के लिए पुराना माना जाता है?

— रजत
स्रोत

1

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

— केनेथ जे
स्रोत

1

... <input>तत्व पर कोई "आईडी" विशेषता नहीं है; यह केवल IE में काम करेगा क्योंकि IE टूट गया है।

— पॉइन्टी

क्षमा करें, मुझे लगा कि एक आईडी थी, document.getElementsByName ("सवाल") [0] .value, या बस तत्व में एक आईडी जोड़ें

— केनेथ जे

1

बस इनपुट तत्व में एक आईडी टैग जोड़ें ... अर्थात:

और आप जावास्क्रिप्ट में तत्व के मूल्य की जाँच करें:

document.getElementById ( "प्रश्न")। मूल्य

ओह हाँ, फ़ायरफ़ॉक्स / फ़ायरबग प्राप्त करें। यह जावास्क्रिप्ट करने का एकमात्र तरीका है।

— बाल
स्रोत

0

नीचे मेरा समाधान es6 में है क्योंकि मैंने constअगर आप es5 पसंद करते हैं तो आप सभी के constसाथ प्रतिस्थापित कर सकते हैं 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";
}

स्निपेट का विस्तार करें

— किंग्स्टन फॉर्च्यून
स्रोत

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>

स्निपेट का विस्तार करें

उपरोक्त कोड का उपयोग करने से पहले आपको gen_validatorv31.js फ़ाइल को जोड़ना होगा

— रवींद्र बोहरा
स्रोत

0

सभी दृष्टिकोणों को मिलाकर हम ऐसा कुछ कर सकते हैं:

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

स्निपेट का विस्तार करें

ध्यान दें कि यदि आप वास्तव में मूल्यों की जांच करना चाहते हैं, तो आपको सर्वर पर ऐसा करना चाहिए, लेकिन यह इस प्रश्न के दायरे से बाहर है।

— A. मेशू
स्रोत

0

आप सबमिट करने के बाद प्रत्येक इनपुट के माध्यम से लूप कर सकते हैं और जांच कर सकते हैं कि क्या यह खाली है

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
स्रोत

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>

स्निपेट का विस्तार करें

— रिजकी फौजी
स्रोत

नमस्ते, जब आप एक समाधान प्रदान कर रहे हैं, तो यह एक कारण प्रदान करना बहुत अच्छा होगा कि आपका समाधान समस्या को ठीक करता है जो भविष्य के पाठकों की मदद कर सकता है।

— एहसान महमूद