テキストをテキストボックスに追加する方法

Question

このJavaScriptはname-textボックスが空であるかどうかをチェックします。

空白の場合は、同じ行に「名前が必要です」が追加されている必要があります。

function checkFields(){ 
 
    var name = document.forms["contact-form"]["name"].value; 
 
    if(name == ""){ 
 
}

<!--- This is the html code for text box for name and submit button to call checkFields() method --> 
 

 
<div class="required-fields"> 
 
    <label>My Name:</label> 
 
    <input type="text" name="name"/> 
 
</div> 
 
<input type="button" onclick="checkFields()" value="Send Message"/>

Answer 1

さて私はあなたがそれをグーグル、placeholder HTML属性が必要だと思います。

そして、あなたが選んだ方法は、最初の場所で必要な可能性が高いではない、まだプレースホルダで試してみてください

 function checkFields(){ 
      var name = document.forms["contact-form"]["name"].value; 
     console.log(name);   
     if(name == ""){ 

       document.getElementsByClassName('error-text')[0].innerHTML='Name field required' 

       } 
       else{ 
       document.getElementsByClassName('error-text')[0].innerHTML=''; 
       } 
    } 

Answer 2

、このupdated fiddleアウトを確認しますかinput requiredメソッドで使用します。

スニペット：

function checkFields(){ 
 
    var name = document.forms["contact-form"]["name"].value; 
 
    if(name ==""){ 
 
    document.getElementById("input").placeholder = "**Name required**"; 
 
    document.getElementById("error").innerHTML ="**Name required**"; 
 
} 
 
    }

<!--- This is the html code for text box for name and submit button to call checkFields() method --> 
 
<form name="contact-form"> 
 
<div class="required-fields"> 
 
    <label>My Name:</label> 
 
    <input type="text" name="name" id="input" > 
 
    <p id="error" style="color:red"></p> 
 
</div> 
 
<input type="button" onclick="checkFields()" value="Send Message"/> 
 
    </form>