У меня есть страница jsp с некоторыми текстовыми полями. Теперь я хочу заполнить их некоторой информацией и нажать кнопку «Отправить». Но мне нужно проверить, пуст ли этот TextBox или нет.Как проверить, пусто ли текстовое поле с помощью javascript
Как я могу это сделать?
Canonical без использования рамок с добавлением отделки прототипа для старых браузеров
<html>
<head>
<script type="text/javascript">
// add trim to older IEs
if (!String.trim) {
String.prototype.trim = function() {return this.replace(/^\s+|\s+$/g, "");};
}
window.onload=function() { // onobtrusively adding the submit handler
document.getElementById("form1").onsubmit=function() { // needs an ID
var val = this.textField1.value; // 'this' is the form
if (val==null || val.trim()=="") {
alert('Please enter something');
this.textField1.focus();
return false; // cancel submission
}
return true; // allow submit
}
}
</script>
</head>
<body>
<form id="form1">
<input type="text" name="textField1" value="" /><br/>
<input type="submit" />
</form>
</body>
</html>
Вот рядная версия, хотя и не рекомендуются показываю его здесь, в случае, если нужно добавить проверку, не имея возможности рефакторинга кода
function validate(theForm) { // passing the form object
var val = theForm.textField1.value;
if (val==null || val.trim()=="") {
alert('Please enter something');
theForm.textField1.focus();
return false; // cancel submission
}
return true; // allow submit
}
передавая объект формы в (это)
<form onsubmit="return validate(this)">
<input type="text" name="textField1" value="" /><br/>
<input type="submit" />
</form>
@Dreamonic Я не понимаю, почему вы отступаете мой код до сих пор, его нельзя читать без прокрутки. Я отступил от него так, как я предпочитаю его отступы, для максимальной видимости и отступов. – mplungjan
Не мог удержаться, не так ли? :) Ну, так как мы собираемся сделать это сейчас, я просто оставлю это здесь: http://meta.stackexchange.com/questions/183169 –
Нет проблем. Возможно, он прочтет это - слишком плохо, это обошлось мне в 10 meta rep. – mplungjan
Использование этого JavaScript поможет вам многое. Некоторые пояснения приводятся в коде.
<script type="text/javascript">
<!--
function Blank_TextField_Validator()
{
// Check whether the value of the element
// text_name from the form named text_form is null
if (!text_form.text_name.value)
{
// If it is display and alert box
alert("Please fill in the text field.");
// Place the cursor on the field for revision
text_form.text_name.focus();
// return false to stop further processing
return (false);
}
// If text_name is not null continue processing
return (true);
}
-->
</script>
<form name="text_form" method="get" action="#"
onsubmit="return Blank_TextField_Validator()">
<input type="text" name="text_name" >
<input type="submit" value="Submit">
</form>
1) Не все браузеры поймут text_form - вы должны использовать document.text_form 2) передать форму функции намного безопаснее и проще 3) что такое «DUDE»? Может быть DUDETTE – mplungjan
Использование регулярных выражений: \ S будет соответствовать нон пробелам: ничего, но не пространство, вкладки или новую строку. Если ваша строка имеет один символ, который не является пробелом, вкладкой или новой строкой, то это не пусто. Поэтому вам просто нужно искать один символ: \ S
JavaScript:
function checkvalue() {
var mystring = document.getElementById('myString').value;
if(!mystring.match(/\S/)) {
alert ('Empty value is not allowed');
return false;
} else {
alert("correct input");
return true;
}
}
HTML:
<form onsubmit="return checkvalue(this)">
<input name="myString" type="text" value='' id="myString">
<input type="submit" value="check value" />
</form>
+1, который помешал перенаправлению на другую страницу и разрешил мою проблему .. cheers .. – Lucky
@dreamonic - здесь вы вдавили код, который в ней нуждался, но, на мой взгляд, не зашел достаточно далеко. Функция и содержимое if выровнены по левому краю - не нужно отступать от кода под тегом скрипта и отбрасывать 12 пробелов – mplungjan
@mplungjan Это вопрос мнения. Я должен был отступить от функции JavaScript, хотя, как последнее исправление, которое я совершил. –
Вы также можете проверить его с помощью JQuery .. Это довольно просто :
<html>
<head>
<title>jQuery: Check if Textbox is empty</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
</head>
<body>
<form name="form1" method="post" action="">
<label for="city">City:</label>
<input type="text" name="city" id="city">
</form>
<button id="check">Check</button>
<script type="text/javascript">
$('#check').click(function() {
if ($('#city').val() == '') {
alert('Empty!!!');
} else {
alert('Contains: ' + $('#city').val());
}
});
</script>
</body>
</html>
Какой бы метод вы ни выбрали, вы не освобождаете вас от выполнения той же проверки на задней панели.
<pre><form name="myform" 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.
@mplungjan: эти данные кэшированы, имеют немного терпения. Он догонит примерно через 15 минут. – BalusC