HTML Form Using JavaScript Valildation

Question

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>

Learn javascript before jquery.

Mr Zach
– Mr Zach

2020-03-10 18:45:42 +00:00
Commented Mar 10, 2020 at 18:45 — Mr Zach
– Mr Zach, Commented Mar 10, 2020 at 18:45

halfer · Accepted Answer · 2020-03-14 13:24:39Z

1

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.

edited Mar 14, 2020 at 13:24

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 10, 2020 at 18:40

John Beasley

3,09911 gold badges55 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asiya Fatima Over a year ago

thanks for all your support but still am not getting also I have to validate using javascript. please help me to solve.

John Beasley Over a year ago

You don't need javascript functions. In your code, you are using "if (firstname.value.length == 0)" to check if the firstname is blank. In my solution, all I did was "if(name == "")" which does the same thing using JQuery. You can also use JQuery to check if the name contains numbers. I think you have to do something like "if(name.isNumeric())" or something like that. Hope this helps.

John Beasley Over a year ago

Remove all of your javascript functions, change your input button into a button and create variables like I did above. Try to alert (or console.log()) each variable so you can understand what the button click is doing. Then try using the if/else statements to validate your inputs.

CSR · Accepted Answer · 2020-03-10 18:20:50Z

0

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.

answered Mar 10, 2020 at 18:20

CSR

1412 silver badges16 bronze badges

1 Comment

Asiya Fatima Over a year ago

thanks for sharing your knowledge, I will go through that

Collectives™ on Stack Overflow

HTML Form Using JavaScript Valildation

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related