CODEWITHSUNDEEP
javascripthtmlcssvalidation
Asiya Fatima
Asiya Fatima

Reputation: 1438

HTML Form Using JavaScript Valildation

I working on Javascript validation task as i am beginner in Javascript i was stuck in Js validation code codepen.Can, Anyone Please help out of this and point me in right direction. Thanks in advance.

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>

Upvotes: 2

Views: 134

Answers (2)

John Beasley
John Beasley

Reputation: 3071

You're doing the same thing I was doing when I started using jQuery... mixing JavaScript with jQuery.

You don't need to create a function to validate the form. I'd first change your submit button to this:

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

Then use jQuery to listen for the button click:

$('#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
  }
});

The if/else inside your button click is your validation.

Upvotes: 1

CSR
CSR

Reputation: 141

I see a ton of errors in your very small code. Your Jquery code looks very bad. You are creating functions but never using them, You don't have to create functions for form validation. You can use Jquery event listeners to check if the user has performed some action like (submit, Focus, Blur etc.,) and when you receive the event you have to perform an action and clearly innerText does not work on input boxes. Go through this article on form validation using Jquery. You should do basic google search before posting a question here.

Upvotes: 0

Related Questions