时间戳

首页 > 解决方案 > 按下按钮时如何在文本框上触发验证？

javascript - 按下按钮时如何在文本框上触发验证？

问题描述

我有两个用于名字和姓氏的文本框。我还有一个按钮来保存数据。该按钮有一个事件处理程序，它从字段中获取数据并使用 jquery 通过对我的 API 的 ajax 调用发布它们。

我想对我的两个文本框进行验证（所以它们不能留空），但我不知道当我的按钮被按下时如何触发它。我没有<form>为此使用标签；按下按钮时，我正在执行 ajax 调用。

标签： javascriptjqueryhtmlweb

解决方案

我想验证我的两个textboxes（所以它们不能留空），但我不知道当我的按钮被按下时如何触发它。我没有<form>为此使用标签；按下按钮时，我正在执行 ajax 调用。

表单验证的答案。我假设First name并且Last name只能包含alphabets ,i.e., only a-z and A-Z.

//This function will trim extra whitespaces form input.
function trimInput(element){
    $(element).val($(element).val().replace(/\s+/g, " ").trim());
}

//This function will check if the name is empty
function isEmpty(s){
 var valid = /\S+/.test(s);
 return valid;
}

//This function will validate name.
function isName(name){
	var valid = /^[a-zA-Z]*$/.test(name);
	return valid;
}
  
$('#myForm').submit(function(e){
	e.preventDefault();
  var fname = $(this).find('input[name="fname"]');
  var lname = $(this).find('input[name="lname"]');
  var flag = true;
  trimInput(fname);
  trimInput(lname);
  if(isEmpty($(fname).val()) === false || isName($(fname).val()) === false){
  	alert("First name is invalid.");
    flag = false;
  }
  if(isEmpty($(lname).val()) === false || isName($(lname).val()) === false){
  	alert("Last name is invalid.");
    flag = false;
  }
  if(flag){
  	alert("Everything is Okay");
  	//Code to POST form data goes here... 
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" id="myForm" method="post" action="#">
  <input type="text" name="fname" placeholder="Firstname">
  <input type="text" name="lname" placeholder="Last Name">
  <input type="submit" name="submit" value="Submit">
</form>

我没有<form>为此使用标签。

然后代码会像

//This function will trim extra whitespaces form input.
function trimInput(element) {
  $(element).val($(element).val().replace(/\s+/g, " ").trim());
}

//This function will check if the name is empty
function isEmpty(s) {
  var valid = /\S+/.test(s);
  return valid;
}

//This function will validate name.
function isName(name) {
  var valid = /^[a-zA-Z]*$/.test(name);
  return valid;
}

$('#submit').click(function() {
  var fname = $('#fname');
  var lname = $('#lname');
  var flag = true;
  trimInput(fname);
  trimInput(lname);
  if (isEmpty($(fname).val()) === false || isName($(fname).val()) === false) {
    alert("First name is invalid.");
    flag = false;
  }
  if (isEmpty($(lname).val()) === false || isName($(lname).val()) === false) {
    alert("Last name is invalid.");
    flag = false;
  }
  if (flag) {
    alert("Everything is Okay");
    //Code to POST form data goes here... 
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="fname" name="fname" placeholder="Firstname">
<input type="text" id="lname" name="lname" placeholder="Last Name">
<button type="button" id="submit" name="submit">Submit</button>

检查jsFiddle上的代码。希望这会有所帮助。

推荐阅读