フィールドが空であるかどうかをチェックするJavascript関数

次の関数を使用して、ユーザーがフィールド内に何かを入力したかどうかを確認できます。空白のフィールドは、2種類の値を示すことができます。長さゼロの文字列またはNULL値。フィールドが空であるかどうかをチェックするJavascript関数

function required() 
 
{ 
 
var empt = document.forms["form"]["text"].value; 
 
if (empt == "") 
 
{ 
 
alert("Please input a Value"); 
 
return false; 
 
} 
 
else 
 
{ 
 
alert('Code has accepted : you can try another'); 
 
return true; 
 
} 
 
}

li {list-style-type: none; 
 
font-size: 16pt; 
 
} 
 
.mail { 
 
margin: auto; 
 
padding-top: 10px; 
 
padding-bottom: 10px; 
 
width: 400px; 
 
background : #D8F1F8; 
 
border: 1px soild silver; 
 
} 
 
.mail h2 { 
 
margin-left: 38px; 
 
} 
 
input { 
 
font-size: 20pt; 
 
} 
 
input:focus, textarea:focus{ 
 
background-color: lightyellow; 
 
} 
 
input submit { 
 
font-size: 12pt; 
 
} 
 
.rq { 
 
color: #FF0000; 
 
font-size: 10pt; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JavaScript form validation - checking non-empty</title> 
 
<link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 
<body> 
 
<div class="mail"> 
 
<h2>Input your Name and Submit</h2> 
 
<form name="form1" action="#" onsubmit="required()"> 
 
<ul> 
 
<li><input type='text' name ='text1'/></li> 
 
<li class="rq">*Required Field</li> 
 
<li><input type="submit" name="submit" value="Submit" /></li> 
 
</ul> 
 
</form> 
 
</div> 
 
<script src="non-empty.js"></script> 
 
</body> 
 
</html>

私はこのコードをしようとしていますが、スクリプトを実行することはできません。私が役に立ったらjquery.jsも使用しています

どうすればこの問題を解決できますか？

出典

2017-08-14 devadinesh

あなたはjQueryのを使用している、ここでの実施例であることを述べたので：

function required(e) { 
 
    //e.preventDefault(); 
 
    var empt = $("#text1").val(); 
 
    if (empt == "") { 
 
    alert("Please input a Value"); 
 
    return false; 
 
    } else { 
 
    alert('Code has accepted : you can try another'); 
 
    return true; 
 
    } 
 
}

li { 
 
    list-style-type: none; 
 
    font-size: 16pt; 
 
} 
 

 
.mail { 
 
    margin: auto; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    width: 400px; 
 
    background: #D8F1F8; 
 
    border: 1px soild silver; 
 
} 
 

 
.mail h2 { 
 
    margin-left: 38px; 
 
} 
 

 
input { 
 
    font-size: 20pt; 
 
} 
 

 
input:focus, 
 
textarea:focus { 
 
    background-color: lightyellow; 
 
} 
 

 
input submit { 
 
    font-size: 12pt; 
 
} 
 

 
.rq { 
 
    color: #FF0000; 
 
    font-size: 10pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript form validation - checking non-empty</title> 
 
    <link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 

 
<body> 
 
    <div class="mail"> 
 
    <h2>Input your Name and Submit</h2> 
 
    <form name="form1" action="#" onsubmit="required()"> 
 
     <ul> 
 
     <li><input type='text' id="text1" name='text1' /></li> 
 
     <li class="rq">*Required Field</li> 
 
     <li><input type="submit" name="submit" value="Submit" /></li> 
 
     </ul> 
 
    </form> 
 
    </div> 
 
    <script src="non-empty.js"></script> 
 
</body> 
 

 
</html>

変更のみがテキストフィールドにIDを追加することであった、と値を取得しますjQueryを使用します。

希望すると便利です。

出典

2017-08-14 12:43:39

フォームとテキストフィールドの名前がjavascriptで間違っていました。これを次のスニペットで修正しました。

"var empt = document.forms [" form1 "] [" text1 "]。値;"かわった。

function required() 
 
{ 
 
var empt = document.forms["form1"]["text1"].value; 
 
if (empt == "") 
 
{ 
 
alert("Please input a Value"); 
 
return false; 
 
} 
 
else 
 
{ 
 
alert('Code has accepted : you can try another'); 
 
return true; 
 
} 
 
}

li {list-style-type: none; 
 
font-size: 16pt; 
 
} 
 
.mail { 
 
margin: auto; 
 
padding-top: 10px; 
 
padding-bottom: 10px; 
 
width: 400px; 
 
background : #D8F1F8; 
 
border: 1px soild silver; 
 
} 
 
.mail h2 { 
 
margin-left: 38px; 
 
} 
 
input { 
 
font-size: 20pt; 
 
} 
 
input:focus, textarea:focus{ 
 
background-color: lightyellow; 
 
} 
 
input submit { 
 
font-size: 12pt; 
 
} 
 
.rq { 
 
color: #FF0000; 
 
font-size: 10pt; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JavaScript form validation - checking non-empty</title> 
 
<link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 
<body> 
 
<div class="mail"> 
 
<h2>Input your Name and Submit</h2> 
 
<form name="form1" action="#" onsubmit="required()"> 
 
<ul> 
 
<li><input type='text' name ='text1'/></li> 
 
<li class="rq">*Required Field</li> 
 
<li><input type="submit" name="submit" value="Submit" /></li> 
 
</ul> 
 
</form> 
 
</div> 
 
<script src="non-empty.js"></script> 
 
</body> 
 
</html>

出典

2017-08-14 12:44:20

あなたのテキストフィールドに "ID" のIDを追加し、送信ボタンに "提出"。

$('#submit').click(function(){ 
     if($('#id').val()){ 
      alert('Code has accepted : you can try another'); 
      return true; 
     }else{ 
`   alert('Enter Text'); 
      return false; 
     } 
    })

出典

2017-08-14 12:51:19

txtInputとしてあなたの入力タイプにそのシンプルなアドオンIDと

 document.getElementById('txtInput').value;

function required() 
 
{ 
 
var empt = document.getElementById('txtInput').value; 
 
if (empt == "") 
 
{ 
 
alert("Please input a Value"); 
 
return false; 
 
} 
 
else 
 
{ 
 
alert('Code has accepted : you can try another'); 
 
return true; 
 
} 
 
}

li {list-style-type: none; 
 
font-size: 16pt; 
 
} 
 
.mail { 
 
margin: auto; 
 
padding-top: 10px; 
 
padding-bottom: 10px; 
 
width: 400px; 
 
background : #D8F1F8; 
 
border: 1px soild silver; 
 
} 
 
.mail h2 { 
 
margin-left: 38px; 
 
} 
 
input { 
 
font-size: 20pt; 
 
} 
 
input:focus, textarea:focus{ 
 
background-color: lightyellow; 
 
} 
 
input submit { 
 
font-size: 12pt; 
 
} 
 
.rq { 
 
color: #FF0000; 
 
font-size: 10pt; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JavaScript form validation - checking non-empty</title> 
 
<link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 
<body> 
 
<div class="mail"> 
 
<h2>Input your Name and Submit</h2> 
 
<form name="form1" action="#" onsubmit="required()"> 
 
<ul> 
 
<li><input type='text' id="txtInput" name ='text1'/></li> 
 
<li class="rq">*Required Field</li> 
 
<li><input type="submit" name="submit" value="Submit" /></li> 
 
</ul> 
 
</form> 
 
</div> 
 
<script src="non-empty.js"></script> 
 
</body> 
 
</html>

のようにその値を取得します

出典

2017-08-14 13:04:21

フィールドが空であるかどうかをチェックするJavascript関数

答えて

関連する問題