I am pretty new to Angular JS .Here I have a simple form as below:
test3.php:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
</head>
<body>
<form name="myForm" id="myForm" ng-controller="Register" ng-submit="submit()" action="test2.php" method="post">
<label>First Name:</label>
<input type="input" name="firstname" ng-model="firstname" required>
<label>Last Name:</label>
<input type="input" name="lastname" ng-model="lastname" required>
<label>Email:</label>
<input type="email" name="email" ng-model="email" required>
<input type="submit" id="submit" value="Submit" />
</form>
<script>
function Register($scope) {
$scope.firstname = '';
$scope.lastname = '';
$scope.email = '';
$scope.submit = function() {
document.getElementById('myForm').submit();
};
}
</script>
</body>
</html>
And test2.php:
<?php
echo $_POST['firstname'];
?>
When I load test3.php and click on submit without filling any details, I get the message to fill the fields accordingly and the form is not submitted to test2.php. When all the details are entered properly and then if I click Submit, I see the $_POST['firstname] value. This works correctly in chrome and firefox.
But in IE9, there is no validation at all. On click of Submit, the form is submitted always, be the fields empty or not.
How do I make this code work in IE9 and further? The Angular JS API provides help for IE versions 8 and less.
The cause is due to the fact that (IE < 10) are not HTML5 compliant with respect to client-side validation and therefore wont return true if a "required" attribute is present on the input element, but instead return the (string) attribute value.
Use ngRequired instead of required attribute.
Related
Making a little search engine. The idea is to take input from the user and then based on that, make a redirection to the search page.
The following code:
<form action ="/search.html">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!"><hr>
<input type="submit" name="query" value="Search!">
</form>
Always redirects to the following page regardless of what the input user has given:
/search.html?query=++Search%21++
While (for the input "Suppose This Was Entered") it should go to:
/search.html?query=Suppose++This++Was++Entered
Any help will be appreciated.
The var name used in the query string of the url is the name attribute of the form fields so you need add a name atribute to your text field instead to the submit input.
<form action ="/search.html">
<label for="query"></label>
<input type="text" id="query" name="query" placeholder="TYPE HERE!"><hr>
<input type="submit" value="Search!">
</form>
The id and the name in the text field not necessary has to be the same
You can create a function that gets called when the form submits via the form's onsubmit attribute. From within the funciton you can manipulate your URL generation like below:
Note: return false; is to prevent submitting the form since the return value of the function is passed to the form's onsubmit.
function submitFunction() {
let searchText = document.getElementById("form-search").value.trim();
let form = document.getElementById('myForm');
if(searchText.length > 0) {
document.getElementById("s").value = searchText;
form.action = "/search.html";
form.submit();
} else {
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title of Your page</title>
</head>
<body>
<form id="myForm" method="get" onsubmit="return submitFunction();">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!" value="" >
<input type="hidden" id="s" name="query" value="" />
<hr>
<input type="submit" value="Search!">
</form>
</body>
</html>
I am quite new to this HTML Input Control.
So I want to add "required" attribute to intlTelInput control. Adding the attribute in conventional way i.e
<input type="tel" name="mobile" id="mobile-number" required="required">
is not working.
Can anyone guide me through the process of adding validation to this control.
I have included following css:
<link rel="stylesheet" href="plugins/intl-tel/css/intltelinput.min.css">
Then added the control:
<label>Enter your mobile number</label>
<input type="tel" name="mobile" id="mobile-number" required="required">
And then at end of file I included the script file:
<script src="assets/plugins/intl-tel/js/intltelinput.min.js"></script>
To add default country I have added following js:
(function($){
$(document).ready(function() {
if (typeof $.fn.intlTelInput !== 'undefined') {
$("#mobile-number").intlTelInput({
defaultCountry: "in",
preferredCountries: ["in"]
});
}
});
})(window.jQuery);
Thanks
Try to use the following code:
change type to text
add only a required attribute
Notes: You could use the pattern attribute for phone number in case you need it.
<form action="/action_page.php">
<input type="text" name="mobile" id="mobile-number" required>
<input type="submit">
</form>
i'm trying to avoid the validation in a input of type image but with IE10 seems that doesn't work if the input is a image type.
Someone know a solution to avoid the validation or similar? Thanks in advance.
Here the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo.asp" method="post">
E-mail: <input type="email" name="userid" required>
<input type="submit">
<input type="submit" formnovalidate value="submit as admin">
<input type="image" formnovalidate value="no validation">
</form>
</body>
</html>
I know it is an older question but you could add the following function:
handleSubmit(element) {
var form = document.forms[0] ;
form.noValidate = !!element.formnovalidate ;
return true;
}
then attach the function to the submit buttons with handleSubmit(this)
I have created a basic HTML contact form using cgimail and everything works, but I can't get it to keep from redirecting somewhere after the form is submitted. I'm trying to instead use a bootstrap alert at the top of the page.
How do I get the form to submit, then keep it from redirecting?
here's the code:
<form method="post" action="/cgi-bin/cgiemail/forms/email.txt">
<fieldset>
<h2 id="contact-header">Contact</h2>
<label>Name:</label>
<input type="text" name="yourname" placeholder="" autofocus>
<label>Email Address:</label>
<input type="email" name="email" value="" placeholder="">
<label>Phone:</label>
<input type="tel" name="phone" value="" placeholder="">
<label>Message:</label>
<textarea name="message" rows="2"></textarea>
<br>
<button type="submit" id="formSubmit" class="btn">Send</button>
<input type="hidden" name="success" value="">
</fieldset>
</form>
Thanks,
Ryan
The "action" attribute in your form is telling it to send the browser over to that email.txt, which would then have control over whether or not to redirect you to another page. By default it would at least redirect you to the email.txt page for the post, but odds are cgi is doing extra stuff when posting to that page.
Using jQuery AJAX, you can do the following (this code skips error checking):
$('form').submit(function() {
var data = { };
data.yourname = $(this).find('input[name="yourname"]').val();
data.message = $(this).find('textarea[name="message"]').val();
// do the same as above for each form field.
$.post("/cgi-bin/cgiemail/forms/email.txt", data, function() {
//add the alert to the form.
$('body').prepend('div class="alert">Success!</div>');
});
return false;
});
You have two straight-forward choices. You can use jQuery and its forms plugin to turn this into an ajax operation or you can roll your own equivalent. It would look something like this (using jQuery):
$('form').submit(function() {
... get all values.
... ajax post the values to the server.
return false;
});
If you're using jQuery, then you could try cancelling the submit event. First give your form an id
HTML:
<form id="myform" ...
JavaScript:
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/cgi-bin/cgiemail/forms/email.txt',
type: 'post',
data: $(this).serialize()
});
return false;
});
I am building a form using html in wordpress. The fields that need to be required work in chrome (giving a please fill out this field when the submit button is pressed without information in the field) however it will not work in IE or mobile, it just allows the form to be submitted. Here is a sample of a field
Last name: *
input type="text" name="lastname" value="" maxlength="50" required="required"
I dont know whats going on here and Im pretty new so any help would be appreciated
(edit with answer)
This is what I ended up doing and it works now thanks for the responses
<html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" form action="dlcplateFormTest.php" onsubmit="return validateForm()" method="POST">
<tr>
<td>Last name: *</td>
<td><input type="text" name="lastname" value="" maxlength="50" required="required" /> </td>
</tr>
<tr>
<input type="submit" value="Submit" /><input type="reset" value="Reset" />
</form>
</body>
</html>
you need to write a javascript function that checks if the fields are "" or not if they are "" then cancel request