for some reason it's not validating the isNan code, can you guys help me? But it's validating the not null condition, but is not appearing any pop up when i insert letters
<html>
<head>
<script type='text/javascript'>
function resultado()
{
if(massa.peso.value=="") || (isNaN(massa.peso.value)==false))
alert("Preencha a peso");
if(massa.altura.value=="") || (isNaN(massa.altura.value)==false))
alert("Preencha a altura");
}
</script>
</head>
html:
<body>
<h1>INDICE MASSA CORPORAL</h1>
<form name="massa">
Peso: <input type="text" name="peso">
Altura: <input type="text" name="altura">
<input type="submit" value="Confirmar" onclick="resultado()">
<input type="reset" value="Limpar">
</form>
</body>
</html>
I see that, you are checking isNaN with false rather than true.
isNaN will return true if the parameter is not a number and false if it is a number.
I think it's perfectly working fine(ofcourse with the brackets on). Please find the plunker link https://plnkr.co/edit/rbu7sFhJoKJuFgFqDoFY
function resultado()
{
if((massa.peso.value=="") || (isNaN(massa.peso.value)==true))
console.log("Preencha a peso");
if((massa.altura.value=="") || (isNaN(massa.altura.value)==true))
console.log("Preencha a altura");
}
<body>
<h1>INDICE MASSA CORPORAL</h1>
<form name="massa">
Peso: <input type="text" name="peso" />
Altura: <input type="text" name="altura" />
<input type="submit" value="Confirm" onclick="resultado()" />
<input type="reset" value="Limpar" />
</form>
</body>
To echo to the another answer that you messed up your condition it should be
(massa.peso.value=="") || (isNaN(massa.peso.value)==true)
To add , Also you are using submit event ,not sure what you exactly you want here but if its just front end validaion , you might want to change the button to a regular button or change the default action of onsubmit event
https://jsfiddle.net/hv1nr063/
function resultado(){
let peso = document.getElementsByName("peso")[0]
, altura = document.getElementsByName("altura")[0];
if( !peso.value ){
alert("Preencha a peso");
return;
}
if( !altura.value ){
alert("Preencha a altura");
return;
}
}
<h1>INDICE MASSA CORPORAL</h1>
<form name="massa">
Peso: <input type="text" name="peso" />
Altura: <input type="text" name="altura" />
<input type="submit" value="Confirmar" onclick="resultado()">
<input type="reset" value="Limpar">
</form>
Related
I have an form, like this
<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>
but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">
Mark your input required and add some CSS, like this:
input:required:valid::after{
content: url(path/to/right.png);
}
input:required:invalid::after{
content: url(path/to/wrong.png);
}
<input type="text" required="required" minlength="1">
Fall back on #divy3993's if you have to support some horrible old browser
I would go with #dtanders but still a simple solution with JavaScript would not harm you.
function myFunction() {
var x = document.getElementById("abc");
var curVal = x.value;
var imageRW = document.getElementById('img_right_wrong');
if (curVal == "")
{
//wrong.png
imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
}
else
{
//right.png
imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
}
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>
Update:
Working Fiddle
Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:
function checkInput() {
if ($("#abc").val().length == 0) {
// change image
}
}
<input id="abc" name="abc" onchange="checkInput()">
But using jQuery plugin is better:
link (EDIT: this link is dead, but it can be found on the Wayback Machine)
This can be done easily in angularjs using ng-show.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Chat Application</title>
<script src="./scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body ng-app="chatApp">
<div>
<input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
<br />
<img src="right.png" alt="right" ng-show="text.length >0">
<img src="wrong.png" alt="wrong" ng-show="text.length === 0">
<input type="submit" id="submit" value="submit">
</div>
<script src="./scripts/app.js"></script>
</body>
</html>
form is not valid and check box is not selected then the button should be disabled.This is my code and it is not working according to my conditions.where should I make correction.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
angular.module("my_app",[])
.controller("my_controller",function($scope,$http){
$scope.cities={};
$scope.user={
full_time:true,
};
})
</script>
<div ng-app="my_app" ng-controller="my_controller">
<form name="frm">
<input type="checkbox" ng-model="user.part_time"/> <label>part_time</label>
<input type="checkbox" ng-model="user.full_time" value="full_time" /> <label>full_time</label>
<input type="checkbox" ng-model="user.traing" value="training" /> <label>traing_time</label>
<input type="checkbox" ng-model="user.one_time" value="one_time" /> <label>one_time</label> <br>
<input type="submit" value="click here" ng-disabled="((frm.invalid) || ((user.full_time) || (user.part_time) || (user.one_time) || (user.traing) ))" />
</form>
</div>
the only part that I have to change is
<input type="submit" value="click here" ng-disabled="((frm.invalid) || ((user.full_time) || (user.part_time) || (user.one_time) || (user.traing) ))" />
to
<input type="submit" value="click here" ng-disabled="!((frm.invalid) || ((user.full_time) || (user.part_time) || (user.one_time) || (user.traing) ))" />
only !(not) is added ng-disabled="!((frm.invalid)
and now it is working fine
Given a simple html form like this:
<form name="myForm" action="#sent" method="post" ng-app>
<input name="userPreference1" type="text" ng-model="shipment.userPreference" />
<input name="userPreference1" type="text" ng-model="shipment.userPreference" />
<input name="userPreference1" type="text" ng-model="shipment.userPreference" />
... submit input and all the other code...
</form>
I need your help to know how to check on validation time, if at least one of the inputs is empty. The desired validation is the following. The user must complete at least one a preference.
Using jQuery this:
if ( $("input").val() == "" ) {
Works ok, but would like to figure out how to do the same thing using angular.
Thanks so much in advance,
Guillermo
So the idea is to disable the submit button if all inputs are blank. You can do like this
<form name="myForm" action="#sent" method="post" ng-app>
<input name="userPreference1" type="text" ng-model="shipment.userPreference1" />
<input name="userPreference1" type="text" ng-model="shipment.userPreference2" />
<input name="userPreference1" type="text" ng-model="shipment.userPreference3" />
<button type="submit" ng-disabled="!(!!shipment.userPreference1 || !!shipment.userPreference2 || !!shipment.userPreference3)">Submit</button>
</form>
!!str is to force to convert str to a boolean value. And both !!null and !!"" are evaluated to be false.
Demo
You can set the "required" in the input elements and style / code how you want to handle with $valid of a form. Check out http://dailyjs.com/2013/06/06/angularjs-7/
My solution was the following:
$scope.requiredInputsGroup = function () {
var isRequired = true;
if (!$scope.shipment) {
return true;
}
angular.forEach(["userPreference1", "userPreference2", "userPreference3"], function (input) {
if ($scope.shipment[input]) {
isRequired = false;
return false;
}
});
return isRequired;
};
You apply that method to a data-ng-required in each of the inputs...
<form name="myForm" action="#sent" method="post" ng-app>
<input name="userPreference1" type="text" ng-model="shipment.userPreference1" ng-required="requiredInputsGroup()" />
<input name="userPreference2" type="text" ng-model="shipment.userPreference2" ng-required="requiredInputsGroup()" />
<input name="userPreference3" type="text" ng-model="shipment.userPreference3" ng-required="requiredInputsGroup()" />
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
And the last bit I applied was to make the button disabled with a simple myForm.$invalid
Hey guys i am having some problems with javascript, and i was wondering whether you could help me out?
This is my HTML code
<div class="Answer1">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result2();">
</form>
</div>
and this is my javascript
function result() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
function result2() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer2.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
If I comment out one of these it works perfectly fine but if its not commented it doesnt work :( I dont understand what ive done wrong :(
You have two form with the same value for name attribute and two input with the same value for name.
js
function result()
{
var score =document.getElementsByName('answer1')[0].value;
if(score == 8)
{
document.getElementsByName('form1')[0].action = "http://www.wordpress.com";
document.getElementsByName('form1')[0].submit();
}
else
{
document.getElementsByName('form1')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
function result2()
{
var score = document.getElementsByName('answer2')[0].value;
if(score == 8)
{
document.getElementsByName('form2')[0].action = "http://www.wordpress.com";
document.getElementsByName('form2')[0].submit();
}
else
{
document.getElementsByName('form2')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
html
<div>
<form name="form1">
Enter your answer here :
<input type="text" size="10" name="answer1" value="">
<input type="button" value="Check" onclick=" result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" name="answer2" value="">
<input type="button" value="Check" onclick=" result2();">
</form>
</div>
To have same id for several elements put javascript in 'gridlock'. Identify your element with an unique id name is usually faster and easier for DOM / Javascript / jQuery to find the node/element faster.
This format is appropriate method if all of elements are in the same page.
<form name="form1">
Enter your answer here :
<input type="text" size="10" id="answer1" name="answer1" value="">
<input type="button" value="Check" onclick="result1();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" id="answer2" name="answer2" value="">
<input type="button" value="Check" onclick="result2();">
</form>
how to check input text before POST operation? it must be numbers only
<form method="post" action="credit.php">
Сумма кредита: <input type="text" name="sum"> <br />
первый взнос: <input type="text" name="pv"> <br />
Срок: <input type="text" name="srok"> <br />
Процентная ставка: <input type="text" name="percent"> <br />
<input type="submit">
</form>
sorry for my bad english.
Use some kind of javascript..
<form method="post" action="credit.php" onsubmit="validateForm()">
<input type="text" name="pv" id="pv"> <br />
....
</form>
<script type="text/javascript">
function validateForm() {
var result = /^\d+$/.test(document.getElementById('pv').value);
return result
}
</script>
If your onsubmit returns false, the form won't go. If it returns true, the form will submit.