We Keep Coding

Make required field prompt come before onclick=confirm() prompt

Right now, I have a text field that looks sorta like this:
<input type="text" name="name" value="" pattern=".{3,}" required title="3 char minimum">
Followed by a submit button:
<input type="submit" value="Submit" onclick="return confirm('Are you sure?')">
If there are not three characters in the text box and I click the submit button, the confirm() box will take priority of coming up first instead of the required title coming up first.
Is there a way to make the required title display before the confirmation window from the submit button?
Here's a fiddle: https://jsfiddle.net/yu21maor/

Instead of on click of submit button, you can put the call on the form submit.
Try This:
<form action="" onSubmit="return confirm('Are you sure?')">
<input type="text" name="name" value="" pattern=".{3,}" required title="3 char minimum">
<input type="submit" value="Submit">
</form>
Fiddle

How to do unsuccess to submit form jquery

I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>

You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps

The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.

Placeholder appearing only after click HTML JS

I have a simple form. When the page loads, the input fields are empty, and the placeholder only appears when I click on the field.
<input type="text" onblur="if(this.value=='') this.value='Vorname,
Name';" onfocus="if(this.value=='Vorname, Name')
this.value='';" name="dynamic_0" title="Vorname, Name" value="">
How can I get the placeholder to be visible on page load as well?

Use the html placeholder element
<input type="text" placeholder="whatever you want" onblur="if(this.value=='') this.value='Vorname, Name';" onfocus="if(this.value=='Vorname, Name') this.value='';" name="dynamic_0" title="Vorname, Name" value="">
for old IE compatibility you should check out this polyfill aswell:
https://github.com/ginader/HTML5-placeholder-polyfill

Javascript animates both form fields, only want one

I have a search and a subscribe field. I want them both to look and feel the same, so I copied the working code from the search field to the subscribe field. The fields should expand when you click on them, and the value disappears so the user can enter their own. The only thing is that now when you click on one of the fields, the animation happens to both fields. I think the problem may be with my understanding of "this" in javascript, but perhaps not. Any help would be greatly appreciated.
<br />
<form target="_blank" id="subscribe" method="post" action="https://www.myaction.com">
<p>
<input type="hidden" name="username" value="myusername">
<input type="text" name="email" value="Email Address" id="subscribe" onfocus="javascript:if(this.value=='Email Address')this.value='';" onblur="this.value=!this.value?'Email Address':this.value;" maxlength="100">
</p>
<br />
<input type="submit" value="Subscribe" />
</form>

<input type="text" name="email" value="Email Address" id="subscribe" onfocus="this.value = this.value ==='Email Address' ? '' : this.value;" onblur="this.value = this.value || 'Email Address';" maxlength="100">

The problem ended up being in my HTML. Stupid mistake. Thanks for your help.

Post data in two forms, The first form doesn't send any data until the second one is filled out

Basically I have two forms. I want to have a user upon registration fill out the first lot of information. Press next (submit), then fill out the second lot of information. Once they press register, submit both sets of POST information.
What I have is this - two sections with two different forms (there's a reason why these are split into two forms - part of the look of the site):
<section class="first">
<header>
<h1>Signup 1/2</h1>
</header>
<form id="firstForm">
<label>First Name</label>
<input type="text" class="input-text" value="" name="firstName" required />
<label>Surname</label>
<input type="text" class="input-text" value="" name="Surname" required />
<label>Username</label>
<input type="text" class="input-text" value="" name="Username" required />
<input type="submit" name="firstSubmit" value="next"/>
</form>
</section>
<section class="second">
<header>
<h1>Signup 2/2</h1>
</header>
<form name="secondForm" class="clearfix">
<label>Your Email</label>
<input type="email" class="input-text" value="" name="email" required />
<label>Password</label>
<input type="text" class="input-text" value="" name="password" required />
<input type="submit" name="secondSubmit" value="Register" />
</form>
</section>
So the second section is hidden until the user clicks the next button (submit). I have javascript stopping it from submitting, and hiding the first section, and making the second one appear:
<script type="text/javascript">
$("#firstForm").bind("submit", nextForm);
function nextForm() {
$('.first').css("display", "none");
$('.second').css("display", "block");
return false;
}
This works.
My issue is then getting the secondForm to submit, but POST both the first and second's information, as if with the one submit button, I was submitting both. Is this possible? And if so, how?
To use a GET method I'd go:
$("#secondForm").bind("submit", submitForm);
function submitForm() {
document.getElementById("firstForm").submit();
document.getElementById("secondForm").submit();
}
But I don't want to do that, as GET = a bad idea for sensitive info.

I would use one form, but wrap the two sets of inputs in divs. Just hide the first div and show the second on the first button click (which you wouldn't keep as a submit button), then submit the entire form on the second button click.