Why doesn't my ng-show work when I give ng-app a name and declare it?
https://jsfiddle.net/jzhang172/f7mrkf48/
$(function(){
var app = angular.module('myApp', []);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<form name="formMe">
1<input type="text"><br>
2<input type="text"><br>
Email<input name="email" ng-model="email" required>
<span ng-show="formMe.email.$touched">You touched me</span><br>
<input type="submit" ng-disabled="formMe.email.$invalid">
</form>
</div>
You need to use name attribute for your form and use that form name instead of module name myApp to validation form field. So use name property in your form tag name="myForm" and for validation use myForm.email.$invalid
like:
<form name="myForm">
1<input type="text"><br>
2<input type="text"><br>
Email<input type="email" name="email" ng-model="email" required>
<span ng-show="myForm.email.$touched">You touched me</span><br>
<input type="submit" ng-disabled="myForm.email.$invalid">
</form>
Your code snippet has syntax error, the exact code snippet after fixing the error is working.
var app = angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<form name="formMe">
1
<input type="text">
<br>2
<input type="text">
<br>Email
<input name="email" ng-model="email" required>
<span ng-show="formMe.email.$touched">You touched me</span>
<br>
<input type="submit" ng-disabled="formMe.email.$invalid">
</form>
</div>
Related
I have three textboxes and a submit button. Need to enable submit button only when there is text in any of the 3 textboxes or else the button needs to be disbaled. What would be the code in angular1 or javascript to achieve this validation? Below is my code
First name:
<br>
<input type="text" id="textsend1" name="firstname1" value="Mickey">
<br>
Last name:<br>
<input type="text" id="textsend2" name="lastname" value="Mouse">
<br>
<br>
<input type="text" id="textsend3" name="firstname" value="Mickey">
<br>
<br>
<input type="submit" value="Submit" ng-disabled>
Try to add a class to enable or disable de button, check this url or just use ng-disabled
You can use a form and ng-required to accomplish this. With 3 textboxes it's manageable, but if you start to get more it can get a bit messy.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.firstname = '';
$scope.middlename = '';
$scope.lastname = '';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
First name:<br>
<input type="text"
name="firstname"
ng-model="firstname"
ng-required="!middlename && !lastname"><br>
Middle name:<br>
<input type="text"
name="middlename"
ng-model="middlename"
ng-required="!firstname && !lastname"><br>
Last name:<br>
<input type="text"
name="lastname"
ng-model="lastname"
ng-required="!firstname && !middlename"><br><br>
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid">
</form>
</div>
I need this input informs when the user does not use a valid email address.
takes the form gets red border or a message appears (a hover) next to the field
HTML
<body ng-controller="simulacaoController">
<input type="text" ng-class="{red: cadastro.$invalid}" ng-model="email" name="email" placeholder="E-Mail" ng-pattern="mascaraEmail" class="last" required />
</body>
AngularJS
angular.module("simulacao", []);
angular.module("simulacao").controller("simulacaoController", function($scope){
$scope.mascaraEmail = "/^[a-zA-Z0-9][a-zA-Z0-9\._-]+#([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2,3}/";
});
CSS
.red {
border: solid 1px red;
}
My code: https://fiddle.jshell.net/kvxcsync/2/
You could use the input type email:
<input type="email" ... />
More about input types.
AngularJS has email validation so no need to use ng-pattern for this
<body ng-controller="simulacaoController">
<form name="myForm">
<input type="name" ng-class="{red: cadastro.$invalid}" ng-model="text" name="email" placeholder="E-Mail" class="last" required />
<form name="myForm" ng-controller="Ctrl">
Email: <input type="email" name="input" ng-model="text" required>
<br>
<span class="red" ng-show="myForm.email.$error.email">
Not a valid email!
</span>
</form>
</body>
Reference link
You have to add input type ="email" and add <form></form> Tags for proper form validation
<body ng-controller="simulacaoController">
<form>
<input type="email" ng-class="{red: cadastro.$invalid}" ng-model="email" name="email" placeholder="E-Mail" ng-pattern="mascaraEmail" class="last" required />
</form>
</body>
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/
I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.
before you blame me, yes I was looking for something similar for about a hour, but sadly I couldn't find my error, atleast the Questions I was looking for in stackoverflow didn't gave me a correct answere, as I have almost exactly the same thing (not Copy and Paste).
However could someone explain me, why my code (javascript) isn't working?
I am playing around with it for some hours now but I can't find it.
<html>
<head>
<title>Anmeldung/Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function abc(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert(yes)
}
}
</script>
</head>
<body>
<div id="banner">
<p>NAME/ÜBERSCHRIFT</p>
</div>
<form id="loginpanel">
<fieldset>
<legend>LOGIN</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="15"></p>
<input class="button" type="button" name="login" value="Anmelden"/>
</fieldset>
</form>
<p id="option"> ...oder Registrieren!</p>
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
</body>
I would be happy if someone can give me an answere!
Thank you for taking your time :)!
You must have inputs with id attribute with values pw+repw. Having only a name attribute will not work
example: <input name="repw" id="repw" type="password" size="30" maxlength="30">
Corrected version (only relevant parts):
<script>
window.abc = function(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert("yes")
}
}
</script>
...
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" id="register-pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" id="register-repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
Note the added IDs. I didn't do pw and repw because having plain pw in login made more sense to me (11684) (don't forget to add that in the login form). Because I'd do register-pw I went for consistency and did register-repw. But it doesn't matter what these IDs are as long as they are unique.
And I changed the typo alert(yes) into alert("yes") because obviously the first throws a reference error.
A working JSFiddle: http://jsfiddle.net/7NZUc/