I am trying to do something very simple using html, however I don't find an easy way to solve this, without onclick javascript events.
My code is like this:
<div class="email">
<input type="email" placeholder="Email">
</div>
<a href="validation.html">
<button class="subscription-button">Keep Me Posted!</button>
</a>
This is fairly simple.
Without the href="validation.html tag, I get an automated form validation,
notifying when '#' is missing and such.
However, when adding the link to the page, this validation is not checked, and it goes on to the next page.
How can I make it check the constraints without needing to write JS for that?
I tried this:
<form action=./validation.html>
<div class="email">
<input type="email" placeholder="Email">
</div>
<input type="submit" value="Keep Me Posted!" />
</form>
But the same result
Try using the form instead of link with a required attribute prevent empty data to auto validate the email type
<form action="validation.html">
<div class="email">
<input type="email" placeholder="Email" required>
</div>
<button type="submit" class="subscription-button">Keep Me Posted!</button>
</form>
I removed the slash from next to validation.html.
Try this:
<form action="validation.html">
<div class="email">
<input type="email" placeholder="Email" required>
</div>
<button type="submit" class="subscription-button">Keep Me Posted!</button>
</form>
Related
I’m using the FormSubmit API.
When a person fills out the form and submits it, whatever they have filled out doesn’t show and I just receive an empty form.
<section id="form-section" class="fade-contact">
<h2 id="form-title" class="fade-contact">Get in touch</h2>
<form action="https://formsubmit.co/8421d4ce6448fbeda493e2c8ce639a8e" method="POST" id="form">
<!-- <input type="hidden" name="_captcha" value="false"> -->
<!-- <input type="hidden" name="_autoresponse" value="Thank you for getting in touch!"> -->
<div class="name-email fade-contact">
<input type="text" name="name" placeholder="YOUR NAME" id="form-name" required>
<input type="email" name="email" placeholder="YOUR EMAIL" id="form-email" required>
</div>
<input type="text" name="textarea" placeholder="YOUR MESSAGE" id="form-message" class="fade-contact" required>
<button type="submit" class="btn submit-btn fade-contact">submit</button>
</form>
</section>
I corrected the name attribute to not use 2 of the same values but still it doesn’t work!
Here is an image of the formsubmitAPI website instructions
screenshot of formsubmitAPI guide
btw I hosted with netlify just incase that helps
I FIXED IT!!!!!!!
Turns out I had some JavaScript to clear the input values after submission and that was somehow affecting the form. I guess the input values were clearing before the form was submitting hence I was getting blank emails.
I just commented it out for now and will look into it later.
But…..I fixed it!! I’m so happy!
Thank you to everyone that helped
I have an HTML form, which consists of few divs, and there are label and input inside every div.
So for name and email inputs I want to add "required" property. But when I set it and then submit the form, I instantly start running the form action, even if my inputs were empty. So that's first time I face with such a trouble. It's also the first time when I put divs inside the form, but it seems like it should work anyway.
So you can see my code below:
<section>
<form id="feedback_form" method="POST" action="{% url 'feedback' %}">
<div class="field half first">
<label for="name">Name*</label>
<input type="text" name="name" id="name" required/>
</div>
<div class="field half">
<label for="email">Email*</label>
<input type="email" name="email" id="email" required/>
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
<button class="button submit" type="submit">Send</button>
</form>
</section>
So I solved this. It was an issue with some implicit javascript code on page (I usually work with backend, so haven't made this page by myself before).
So in .js file I found such part of script which disallowed submitting form in a standard way.
$('form').on('click', '.submit', function(event) {
event.stopPropagation();
event.preventDefault();
$(this).parents('form').submit();
});
So my advice: if you work with code written by others, do some more research and check files few times if you can't solve some implicit tasks.
The signup page of my app is exhibiting unexpected behaviour. I'm using the standard django auth. After editing the html a bit, the form stopped submitting altogether. As in nothing would happen when I clicked submit.
Similar behaviour to this chap, and this one, and this question.
I've fixed it. For some reason, I needed to add an additional opening form tag. I have no idea why. This is what the html looks like now:
<form method="POST">
<form method="POST">
{% csrf_token %}
{{ form.non_field_errors }}
{% bootstrap_form form %}
<input type="submit" class='btn btn-primary' value="Sign Up"/>
</form>
Without the additional form tag at the top, it doesn't work. Can anyone explain what's going on here?
I also noticed that in Atom, when I only have the one opening tag, the editor highlights the tag in orange - meaning it's being treated as an attribute not a tag. When I have both opening tags, one still gets highlighted as an attribute.
Like I said, it's working now but I would prefer to rectify this if anyone in the community can help.
This is how the form renders in the browser:
<div class="login-form">
<h3 style="text-align: center;"><b>Create an Account</b></h3>
<div class="container" <form="" method="POST">
<form method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="IX6HkTrNGNfH5CKgRtvp5II9vzg2fAUshMjlOe">
<div class="form-group"><label class="control-label" for="id_username">Display Name</label><input type="text" name="username" maxlength="150" autofocus="" class="form-control" placeholder="Display Name" title="Required. 150 characters or fewer. Letters, digits and #/./+/-/_ only." required="" id="id_username">
<div class="help-block">Required. 150 characters or fewer. Letters, digits and #/./+/-/_ only.</div>
</div>
<div class="form-group"><label class="control-label" for="id_email">Email Address</label><input type="email" name="email" maxlength="254" class="form-control" placeholder="Email Address" title="" id="id_email"></div>
<div class="form-group"><label class="control-label" for="id_password1">Password</label><input type="password" name="password1" class="form-control" placeholder="Password" title="Your password can't be too similar to your other personal information.Your password must contain at least 8 characters.Your password can't be a commonly used password.Your password can't be entirely numeric." required="" id="id_password1">
<div class="help-block"><ul><li>Your password can't be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can't be a commonly used password.</li><li>Your password can't be entirely numeric.</li></ul></div>
</div>
<div class="form-group"><label class="control-label" for="id_password2">Password confirmation</label><input type="password" name="password2" class="form-control" placeholder="Password confirmation" title="Enter the same password as before, for verification." required="" id="id_password2">
<div class="help-block">Enter the same password as before, for verification.</div>
</div>
<input type="submit" class="btn btn-primary" value="Sign Up">
</form>
</div>
</div>
You have an unclosed div tag immediately before the opening of the form tag.
I have a problem. I have two forms in a web page that are different action but one of my form don't work.
<form name="loginform" id="loginform" action="./loginAction.php" method="GET" class="login-form">
<input type="hidden" name="action" value="login">
<div class="form-group">
<label class="sr-only" for="form-user">Username or Email</label>
<input type="text" name="uname" placeholder="Username or Email..." class="form-user form-control" id="form-user" required>
</div>
<div class="form-group">
<label class="sr-only" for="form-pass">Password</label>
<input type="password" name="upass" placeholder="Password..." class="form-pass form-control" id="form-pass" required>
</div>
<button name="loginBtn" value="login" type="submit" class="btn">Sign in!</button>
</form>
even in submit dosn't redirect to action page
you can see in this url
There is no problem in you html code as well as javascript code.
Its your server code which is redirecting back to the login page . As you are using get the data should be visible in the url. When the form is submited the data cleans because its redirected to the login page. SO if you provide the server code we can have a look to it
From a first look i think if you want to submit data with a form you need to set method="post"
I am having problem with angular validation.
this one does'nt work...
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="text1.$error.required">Please enter something!</span>
but this works:
<form name="myform">
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="myform.text1.$error.required">Please enter something!</span>
</form>
is it possible to somehow correct the first one without placing it inside a form?
thanks
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
As far as I know, no, it is not possible. The FormController is what handles the states of each form element, so you need a reference to it in order to check the validation state.