I want to check the regex validation when I click on the button. It works fine when the button type is submit, but it does not redirect to another page where I have linked the button - however when I change its type to button it redirects to the other page normally and does not check the regex validation. I am also checking if all the input fields are filled, and focusing any empty fields. But I guess something is wrong with the code.
Demo
HTML CODE:
<form action="" method="POST" role="form" class="payment_form">
<div class="contact_details">
<div class="payment_details">
<div class="form-group">
<input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName" placeholder="FULL NAME" required/>
</div>
<div class="form-group">
<input type="email" class="input_name" id="email" title="Eg: some#mail.com" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" name="email" placeholder="EMAIL ADDRESS" required/>
</div>
<div class="form-group">
<input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Enter 10 digit Valid Mobile Number" name="mobileNumber" placeholder="MOBILE NUMBER" required/>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pay_btn" >Continue</button>
</form>
JS:
$('.pay_btn').click(function(e){
$(":input").each(function() {
if($(this).val() === "")
$(this).css('border-color', '#ff0000');
});
});
You have to remove anchor tag from submit button and write the name of html page in action ,this will work fine for page redirection when form is correctly field .For the one field focus at a time you have to change your logic out there .
#Preety Angel , Provide the html file name in the action attribute of form tag <form action="thankyou.html"> like below,
<form action="thankyou.html" method="POST" role="form" class="payment_form">
.......
</form>
I want to check the regex validation when I click on the button. It working fine, when the button type is submit but it does not redirect to another page where i have linked the button,
Whats happening here is, You click on the button who's type is submit, And this button will try to submit the form. So your validation will work on form submit. Since you don't have any url mentioned in the action="" attribute of your form, Your page doesn't know where to go. So solution is add the URL into this action attribute
<form action="thankyou.html" method="POST" role="form" class="payment_form">
but when I am changing the button type to button it redirects to other page normally and does not check the regex validation.
The reason for this is once you remove the button type submit it has nothing to do with the form anymore. Its just a plain button. But you have wrapped this button inside a anchor tag which has a href set. So this is as good as a page redirect by clicking a link, So the form is not submitted at all. Hence your validation keeps quiet. As it works only while form is submitted.
Related
I'm not sure how to explain this, but I want to force a form to check the required fields before doing the onSubmit. This works fine with a normal button, but stops working if the button is disabled. This is something similar to what I have:
<form onSubmit={handleSubmit} id="form">
<input required type="text"/>
<input required type="text"/>
</form>
<MyButton type="submit" form="form" disabled={!allFieldsAreFilled}>
Submit
</MyButton>
So let's say I fill the first input and hit "Enter". The button is still disabled but I want it to show me that the next field is required. Thank you in advance.
I am making a very simple username and password validation for practice.
In my page I hid a upload image form with css usingvisibility: hidden;
Here is my HTML code:
<form id="enter" method="POST" action="" >
<p style="padding:0px;" >Username:</p>
<input type="text" name="" id="user" placeholder="Username" required>
<p style="padding:0px; margin-top: 10px;" >Password:</p>
<input type="password" name="" id="pass" placeholder="Password" required>
<input type="submit" name="" value="Login" onclick="javascript:validate()">
</form>
When I enter Username and Password I want upload image form to appear. As you can see, I tried to use some JavaScript on it. Code:
function validate()
{
if(document.getElementById("user").value == "test" && document.getElementById("pass").value == "123" )
{
document.getElementById('uploadForm').style.visibility = "visible";
}
else
{
alert( "Access Denied" );
}
}
The thing is when I enter correct username and password it refreshes the page. Any help would be much appreciated, thanks.
Your form is doing the default of submitting when you click the button.
This normally includes a POST sent, and then a refresh to get the next page, but with client-side form handling, you need to do one of two things to prevent this default submit:
Your function validate() can be updated to take an event object as a parameter, to then call preventDefault on.
You can return false from that onclick funciton, which will prevent further action
You can change it from a "submit" type input to a <button type=button>. (Not recommended for accessibility reasons)
I've a problem with my form. I want to make standard PHP form but AngularJS is blocking the "Submit" button.
When I click the "Submit" button, it returns some errors in console. And remember I don't want to dynamically submit.
The error is:
An invalid form control with name='' is not focusable.
This example
<body ng-app="mainApp">
<form action="post.php" method="post">
<div ng-controller="MainCtrl">
<label for="titlex">Title</label>
<input id="titlex" class="form-control" type="text" maxlength="75" min="10" name="titlex" required>
</div>
<input type="submit" value="Send">
</form>
</body>
This issue pops up in different cases:
You have a hidden form element that has a required attribute for validation.
You hide an form element before send your data.
Some required form elements does not have a name attribute.
Your submit input does not have a name attribute.
You can try to add a name attribute to your submit input:
<input type="submit" value="Send" name="send">
or you can setup your form to be not validated by the browser mechanics by using
<form name="myform" novalidate>
Try adding name attribute in input tag.
Only form elements with a name attribute will have their values passed when submitting a form.
<input type="submit" value="Send" name="send">
Hope this solves your problem.
I have the following form
<form action="" method="post">
<fieldset>
<legend>Booking Details</legend>
<div>
<label for="name">Name:</label>
<input id="name" name="name" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname" aria-required="true" aria-describedby="name-format">
<span id="name-format" class="help">Format: firstname lastname</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="" required aria-required="true">
</div>
<div>
<label for="website">Website:</label>
<input type="url" id="website" name="website" value="">
</div>
<div>
<label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
<input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
</div>
<div class="submit">
<input type="submit" value="Submit" onclick="alert('martharfarkar')">
</div>
</fieldset>
</form>
JS Fiddle FROM EXAMPLE
I want to send an email using a webservice on the onclick event of a button, but noticed that the event is triggered regardless the form validation, so the question is, is there a way to trigger the onclick event only if the form is valid without using javascript? perhaps HTML5 has something new to offer
I think the problem is that you are attaching an action to the button click not the form submit. So, two things are happening here:
You are atually using javascript in onclick="alert('whatever')"
You are binding this script to the button click not the form submit
Your validation is working fine for the submit action. Consider use the action parameter in form not the onclick param in the input button.
EDIT:
To be more precise the <input type="submit" value="Submit"> default click action is submitting the form.
Hope it helps!
When I need some extra validation I change submit input to an element 'a' with an 'id' that I can check on a jquery click function. So I validate and I fire a submit manually. Example: $('#formId').submit ().
The best possible way is to bind the action to onsubmit event of the form rather than onclick event of button as user onepopcorn mentioned. It can be done by using
<form action="" method="post" onsubmit=alert('whatever')>
instead of using onclick for the submit button.
What I need is when the user types his query in the search Box.
<form class="navbar-search pull-left">
<input type="text" autocomplete="off" autofocus id="query" class="search-query search_input" placeholder="Type your query...">
</form>
I dont have a Button to submit the form. I want the form to be submitted when the user presses the Enter Key.
And when the user presses the Enter key I want the Query to be shown in the URL.
Like the URL before the submission
http://example.come/
And when the user enters his text and presses the enter key. I want the query to be displayed in the URL like this
http://example.come/#query
Without reloading the whole.
Is this possile using the Javascript or Jquery or whatever is more easy.
Edit:
Here's what I tried
window.location.hash = get_query ;
if (get_query.length != 0) {
$("#query").val(get_query);
$('.search_input').trigger('keyup'); // This is the Event which triggers
}
Add a input with type submit element which is hidden to support submitting by the enter key:
<form id="form1" class="navbar-search pull-left" action="">
<input type="text" autocomplete="off" autofocus id="query" class="search-query search_input" placeholder="Type your query...">
<input type="submit" style="display: none;">
</form>
On form submit change the hash with the value of the input:
$('#form1').submit(function() {
window.location.hash = '#' + $("#query").val();
return false;
});
Also see my example and the associated jsfiddle.