时间戳

首页 > 解决方案 > 使用 JavaScript 验证的 HTML 表单

javascript - 使用 JavaScript 验证的 HTML 表单

问题描述

我从事 Javascript 验证任务，因为我是 Javascript 的初学者，我被困在 Js 验证代码codepen 中。可以，任何人都请帮助解决这个问题，并为我指明正确的方向。提前致谢。

jQuery(document).ready(function($) {
function formValidation() {
  var firstname = document.getElementById('product');
if (firstname.value.length == 0) {
  document.getElementById('head').innerText = "*    All fields are mandatory *"; 
  firstname.focus();
return false;
}
if (inputAlphabet(firstname, "* For your name     please use alphabets only *")) { 
   return true;
}
  return false;
}

function textNumeric(inputtext, alertMsg) {
    var numericExpression = /^[0-9]+$/;
        if (inputtext.value.match(numericExpression)) {
        return true;
    } 
    else {
        document.getElementByClass('price').innerText = alertMsg;
        inputtext.focus();
        return false;
    }
}
function inputAlphabet(inputtext, alertMsg) {
    var alphaExp = /^[a-zA-Z]+$/;
        if (inputtext.value.match(alphaExp)) {
        return true;
    } 
    else {
        document.getElementById('product').innerText = alertMsg; 
     inputtext.focus();
     return false;
    }
}


});
body {
    background: #f5f5f5;
}
.product-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px;
}

input#product {
    max-width: 200px;
    padding: 5px 20px;
}

input.price {
    max-width: 227px;
    padding: 5px 4px;
    width: 100%;
}
input.qnty {
    max-width: 235px;
    width: 100%;
    padding: 5px 4px;
}
input[type="submit"] {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #000000;
    padding: 5px 10px;
    letter-spacing: 0.6px;
}
<!DOCTYPE html>
<html>
<head>
	<title>Product Order</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script src="custom.js"></script>
</head>
<body>
	<div class="product-container">
		<form action="submit" method="POST">
		    Product Name: <input type="text" name="name" value=""  required id="product" ><br><br>
		    Unit Price: <input type="number" name="Price" value= "" required class="price" pattern="\d+(\.\d{2})?"><br><br>
		    Quantity: <input type="number" name="Quantity" value="" min="1" max="10" required class="qnty price"><br><br>		    
		    <input type = "submit" name = "submit" value = "Get Total Amount">
		</form>
	</div>
</body>
</html>

标签： javascripthtmlcssvalidation

解决方案

当我开始使用 jQuery 时，您正在做同样的事情......将 JavaScript 与 jQuery 混合。

您无需创建函数来验证表单。我首先将您的提​​交按钮更改为：

<button type="button" id="submitButton">Submit</button>

然后使用jQuery监听按钮点击：

$('#submitButton').on('click', function() {
  var product = $('#product').val();
  var price = $('.price').val(); 
  var name = $('#name').val(); 

  // check if name input has a value, if blank, then display error message
  if(name == "") {
    alert('You must enter a name');
    return false;
  }
  if(product == '//whatever you want to check here') {
    // display message
  }
  if(price == '// check if the input is blank') {
    // return error message
  }
  else {
   // do something
  }
});

按钮单击中的 if/else 是您的验证。

推荐阅读