HTML Форма с использованием JavaScript Проверка - PullRequest
Новая
       4

HTML Форма с использованием JavaScript Проверка

2 голосов
/ 10 марта 2020

Я работаю над 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>

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Вы делаете то же самое, что я делал, когда я начал использовать 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 внутри вашего нажатия кнопки: Ваша проверка.

0 голосов
/ 10 марта 2020

Я вижу тонну ошибок в вашем очень маленьком коде. Ваш код Jquery выглядит очень плохо. Вы создаете функции, но никогда не используете их. Вам не нужно создавать функции для проверки формы. Вы можете использовать Jquery прослушивателей событий , чтобы проверить, выполнил ли пользователь какое-либо действие, например (Отправить, Фокус, Размытие и c.,), И когда вы получаете событие, вы должны выполнить действие и ясно innerText не работает на полях ввода . Go в этой статье о проверке формы с использованием Jquery. Вы должны выполнить basi c поиск в Google, прежде чем отправлять вопрос здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...