We Keep Coding

How to prevent the default browser input validation in React?

I just need to remove "Please fill out this field" without removing a "required" attribute. I have my custom validation, so I have to use a "required" attribute in order to know when the text field is valid or not.
<input
name="name"
value="name"
onChange={this.handleChange}
id="name"
type="text"
autoComplete="off"
required
></input>

remove required attribute from input . use that input
<input
name="name"
value="name"
onChange={this.handleChange}
id="name"
type="text"
autoComplete="off"
/>
input field is self closed field means <input />

Not all attributes binding to ng-model

I have a form in an app I'm building that allows a user to submit their name and email. This form is duplicated on two tabs (on the same page). Here's the basic form:
<form class="user-submit-form" ng-submit="userSubmit(user)" ng-hide="userSubmitted">
<h4><strong>FOR THE CHANCE TO HAVE YOUR STORY DRAWN, TELL US YOUR NAME AND CONTACT METHOD.</strong></h4>
<span>Entries limited to one caption per cartoon per person.</span>
<br>
<input type="text" title="Name required" ng-model="user.name" size="32" placeholder="Name" required>
<input type="email" title="Email required" ng-model="user.email" size="32" placeholder="E-mail Address" required>
<br>
<input type="checkbox" title="Must agree to Terms & Conditions" class="terms"
required><span>I have read and accept the Terms & Conditions</span>
<br>
<input class="user-submit-stories user-submit" type="image" src="images/submit_name.png">
</form>
When I make changes to the user.name attribute the both of the forms update the value. However, when I update the user.email attribute the other form's value is not updated. I've also noticed that when I try to explicitly define the model's attributes in the related controller, the change is not made in the form for user.email
What could be causing a situation where one attribute is properly binded but the other is not?

Mixpanel track event when check box is checked

I am using mixpanel JS for metrics, and I have to capture an event for the form when user tries to submit a form and there is check box which allows user to signup for newsletter . I want to track users who signup and check the box, and no idea as how to approach this problem. Thats how my form looks like
<form id="form_send_email" novalidate="novalidate">
<input type="text" name="first_name" id="first_name" placeholder="First Name"/>
<input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
<input type="text" name="email" id="email" placeholder="Email"/>
<br/>
<input type="checkbox" name="learn_more" id="learn_more" class="css-checkbox" checked="checked"/>
<label for="learn_more" id="learn_more_label" class="css-label">Learn more about our products and sign up</label>
</form>

Usually one want to do some client side validation of forms before actually sending them to the server. There are loads of JS libs that can help you out, jQuery for example.
Then if all data looks ok, send the track request to mixpanel and submit the form.
Mixpanel have client libs for quite some languages, you might want to send the the track request from your server?

Text disappear on click, but new text entered disappears to

Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.
So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.
How can I make it so that the newly entered text does not disappear?
My current code for the text fields:
http://pastie.org/8366114
<input type="text" value="Enter Your First Name" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your First Name';"
onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Email';"
onclick="javascript:if(this.value=='Enter Your Email')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form"
onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';"
onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';"
onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>
I apologize for not posting it on here, but I don't know how to do the code block thing..

to do this with javascript all you need is
<input type="text" value="Enter Your First Name"
onblur="if(this.value=='')this.value='Enter Your First Name';"
onfocus="if(this.value=='Enter Your First Name')this.value='';" />
DEMO
however you can just simply use the html5 placeholder reference
also
dont use the same id more then once, instead use class.
input is self-closing (like <br>)
</br> is wrong use <br> or <br />
here is a working version of your code, i also added submit as the value for your button
<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">
DEMO

<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />
or if you are using HTML5, you can use placeholder attribute:
<input type="text" placeholder="Enter Your First Name" id="form" />

you have to make the onfocus event the same as the onclick event, e.g:
onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"

onFocus="this.value=''"
This is causing your text fields to be reset to blank unconditionally.
You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.

Remove content from form onclick:
in haml:
= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"
in html:
<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">

How to write a generic error handler for AngularJS Forms

This is a follow on question for this question:
Server-side validation form Angular.js
So using that answer you could write some HTML in a template that would display a specific error for each error you give $setValidity. For example here is one:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">Required</span>
However, if I wanted to add one for last names must be 4 or more characters long I'd have:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.minRequired">Last name must be at least 4 characters long</span>
My question is how could I write a generic handler for all errors on a field. Something like:
<input ng-model="user.lastName" required="true" id="lastNameField" name="lastName" type="text" class="span3" placeholder="Last Name"/>
<span class="inlineError" ng-show="myProfile.lastName.$error.required">{{myProfile.lastName.$error.required}}</span>
Is that possible?

Do you mean that you just want to indicate the validity of the form element?
Then, you can do:
<span ng-show="myProfile.lastName.$invalid">Input field is invalid.</span>
If you need to be more specific, you can use ng-repeat to iterate through
myProfile.lastName.$error object and display all the errors.
In this case, you'll have to have some error-name to error-message translation for
readability.