I need help making a javascript/jquery validation library without the use of the
ID: 668610 • Letter: I
Question
I need help making a javascript/jquery validation library without the use of the validation plugin. Validation must be determined by an element's class (not their id). I need to be able to validate combinations such as:
required_size and numeric
required_size and required
required
required and numeric
required, numeric, and required_size
If a condition is not met by the input of the user an alert must be sent out.
This is the HTML code i have:
<!DOCTYPE html>
<html>
<head>
<title>Java Form Validation</title>
<link rel="stylesheet" type= "text/css" href="formValidationStyle.css" media="screen" />
<script type='text/javascript' src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="Validation_advanced-arecore.js" type="text/javascript"></script>
</head>
<body>
<form>
<div class="formField">
<label> Required, Numeric, Required_size </label>
<input id="userInput" type="text" class= "required numeric required_size" />
</div>
<br/>
<div class="formField">
<label > Required_Size, Numeric</label>
<input id="userInput" type="text" class="required_size numeric" />
</div>
<br/>
<div class="formField">
<label>Required</label>
<input type="text" id="userInput" class="required" />
</div>
<br/>
<div class="formField">
<label>Required, Required_Size</label>
<input id="userInput" type="text" class="required required_size" />
</div>
<br/>
<div class="formField">
<label>Required, Numeric</label>
<input id="userInput" type="text" class="required numeric" />
</div>
<br/>
<div class="formSubmit">
<input type="button" id="submit" value="Submit"/>
</div>
</form>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>Java Form Validation</title>
<link rel="stylesheet" type= "text/css" href="formValidationStyle.css" media="screen" />
<script type='text/javascript' src="//code.jquery.com/jquery-1.7.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script src="Validation_advanced-arecore.js" type="text/javascript"></script>
</head>
<body>
<form>
<div class="formField">
<label> Required, Numeric, Required_size </label>
<input id="userInput" type="text" class= "required numeric required_size" />
</div>
<br/>
<div class="formField">
<label > Required_Size, Numeric</label>
<input id="userInput" type="text" class="required_size numeric" />
</div>
<br/>
<div class="formField">
<label>Required</label>
<input type="text" id="userInput" class="required" />
</div>
<br/>
<div class="formField">
<label>Required, Required_Size</label>
<input id="userInput" type="text" class="required required_size" />
</div>
<br/>
<div class="formField">
<label>Required, Numeric</label>
<input id="userInput" type="text" class="required numeric" />
</div>
<br/>
<div class="formSubmit">
<input type="button" id="submit" value="Submit"/>
</div>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.