入力が有効でない場合、どのようにポップアップウィンドウ（アラートボックス）を作成できますか？

Question

基本的に何をしようとしているのは、私がボタンを押すと、何かが書かれているかどうかをチェックし、警告ボックスが表示されないようにする場合です。これは可能ですか？私はこれまでどんなヒントを持っているのですか？ （#inputvalueは値を書くときのIDです。私はvalidateFormという名前のプロセスのために新しい関数を作成しました.Jqueryでこれを行うことは可能ですか？私はJavascriptを書いています。 ...）。 //ナタリー！あなたが提供されたコードを使用して、

$(function(){ 

    function validateForm(){ 
     var ele = $("#inputValue"); 
     if(!ele.val()){ 
      alert("Name must be filled out") 
     } 
    } 

    $("#btnId").on("click", validateForm); 
}); 

$(function(){ 
 
    function validateForm(){ 
 
     var ele = $("#inputValue"); 
 
     if(!ele.val()){ 
 
      alert("Name must be filled out") 
 
     } 
 
    } 
 
    
 
    $("#btnId").on("click", validateForm); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="inputValue"/> 
 
<input type="button" id="btnId" value="submit"/>

Answer 1

#inputValueを正しくターゲットにして、テストでその値を使用するだけです。 jqueryのを使用して

function validateForm() { 
 
    var x = document.getElementById('inputValue').value; 
 
    if (x.trim() == "") { 
 
     alert("Name must be filled out"); 
 
     return false; 
 
    } 
 
}

<form onsubmit="validateForm()"> 
 
    <input id="inputValue" type="text"> 
 
    <input type="submit"> 
 
</form>

、それは基本的には同じことです。次に、htmlのonsubmit属性の代わりにjqueryでサブミットハンドラを使用し、jqueryセレクタを使用する例を示します。ここで

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementsByName("form")[0].addEventListener("submit", function() { 
     var value = document.getElementById("inputValue").value; 
     if (value == "") 
     { 
      window.alert("Name must be filled out!"); 
     } 
    }); 
}); 

Answer 2

確かに：あなたはjQueryのを（あなたがあなたの質問にタグ付けされているとして）を使用することをあなたはこのような何かを試みることができる提供

function validateForm() { 
    var x = document.forms["#inputValue"].value; 
    if ("#inputValue" == "") { 
     alert("Name must be filled out"); 
     return false; 
    } 
} 

Answer 3

jQuery。上記の答えのいくつかとは異なり、私はフォームを使用しませんでした。

//Listen for the click of the button 
 
$(document).on("click", "#enterButton", function(e) { 
 

 
//Get the value of the input box 
 
    var F_Name = $('[name="FirstNameInput"]').val(); 
 
    
 
    //If it is empty, alert. 
 
    if (!F_Name.trim()) { 
 
    alert('Empty'); 
 
    }else{ 
 
    //DO SOMETHING WITH THE INPUT, AJAX? 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="FirstNameInput"> 
 
<button type="button" id='enterButton'>Enter</button>

Answer 4

が使用してソリューションです：マイケル・コーカーは、フォームタグにスクリプトでイベントリスナーを添付する場合、それが良いだろう、言ったことに加えて

$('form').on('submit',function(e) { 
 
    var x = $('#inputValue').val(); 
 
    if (x.trim() == "") { 
 
     alert("Name must be filled out"); 
 
     return false; 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="inputValue" type="text"> 
 
    <input type="submit"> 
 
</form>