按下按鈕時如何觸發文本框驗證？

Question

我有名字和姓氏的兩個文本框。 我還有一個按鈕來保存數據。 該按鈕有一個事件處理程序，它從字段中獲取數據，並使用 jquery 通過 ajax 調用將它們發布到我的 API。

我想驗證我的兩個文本框（所以它們不能留空），但我不知道如何在按下按鈕時觸發它。 我沒有為此使用<form>標簽； 按下按鈕時，我正在執行 ajax 調用。

Answer 1

這是一個可以幫助您的示例：

 $('#save').click(function() { var errors = []; var name = $('#name').val(); var vorname = $('#vorname').val(); if (!name) { errors.push("Name can't be left blank"); } if (!vorname) { errors.push("Vorname can't be left blank"); } if (errors.length == 0) { console.log('Ajax started'); //put here your ajax function } else { for (var i in errors) { console.log(errors[i]); } } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input placeholder="Name" id="name"><br> <input placeholder="Vorname" id="vorname"><br> <button id="save">Save</button>

Answer 2

這是一個使用流行的 jquery 驗證添加示例。 https://jqueryvalidation.org/點擊下面的運行片段按鈕

 $(document).ready(function() { $("#form").validate({ rules: { "firstname": { required: true, }, "lastname": { required: true, } }, messages: { "firstname": { required: "Please, enter a first name" }, "lastname": { required: "Please, enter a last name" }, }, submitHandler: function(form) { // for demo alert('valid form submitted'); // for demo return false; // for demo } }); });

 body { padding: 20px; } label { display: block; } input.error { border: 1px solid red; } label.error { font-weight: normal; color: red; } button { display: block; margin-top: 20px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script> <form id="form" method="post" action="#"> <label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" /> <label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname" /> <button type="submit">Submit</button> </form>

Answer 3

如果沒有看到您的代碼，就很難猜測出正確的場景來提供示例。

鑒於以下 HTML：

<form>
  <input type="text" class="text1">
  <input type="text" class="text2">
  <button type="button">Send</button>
</form>

您可以將其用於 jQuery 部分：

$('button').click(function() {
    var txt1 = $(this).siblings('.text1').val();
    var txt2 = $(this).siblings('.text2').val();
    if (txt1.length && txt2.length) {
      // do your ajaxy stuff here
    } else {
      alert("Imput some friggin' text!");
    }
});

$(this)選擇單擊的按鈕。 .siblings('.text1')在與單擊的按鈕相同的塊內選擇類text1的輸入。

https://jsfiddle.net/sg1x0c3q/7/

Answer 4

根據我的評論，我建議使用表格。 但是如果你想要一個純 JS 解決方案，你就可以了。 （如果您想要基於表單的解決方案，請詢問）

// convert all textareas into key value pairs (You can change the selector to be specific to your markup)
const createPayload = () => {
  return [].slice.call(document.querySelectorAll('textarea')).reduce((collection, textarea) => ({
  ...collection,
  [textarea.name]: textarea.value
  }), {})
}

// Compare Object values against values that are not falsy (you could update the filter with a RegExp if you wanted more complicated validation)
const objectHasAllValues = obj => {
  return Object.values(obj).length == Object.values(obj).filter(value => value).length
}

// If all key value pairs are not falsy then submit
window.submit = () => {
  const payload = createPayload()
  if (objectHasAllValues(payload)) {
    fetch('/your/api', payload)
  }
}

此解決方案假定您的API需要JSON有效負載。 如果您希望發送表單數據，那么您需要使用formData js api。

這可以擴展並且不需要jQuery :)

這里的工作示例https://jsfiddle.net/stwilz/dxg29mkj/28/

Answer 5

我想驗證我的兩個textboxes （所以它們不能留空），但我不知道如何在按下按鈕時觸發它。 我沒有為此使用<form>標簽； 按下按鈕時，我正在執行 ajax 調用。

表單驗證的答案。 我假設First name和Last name只能包含alphabets ,ie, only az and AZ 。

 //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上的代碼。 希望這會有所幫助。