How to prevent the default browser input validation in React? - javascript

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 />

Related

Multiple submit button required failed

this form multiple submit button click after required error.
<form>
<input type="text" required="required">
<input type="submit" name="submit1"> <<- Click input required success
<input type="submit" name="submit2"> <-- Click input required error
</form>
How to fix ?
In addition to Scot Marcus answer, the required attribute has no value. You could easily write your text input element as follow:
<input type="text" required>

HTML validations from javascript

<input type="text" id="newFname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="First Name" />
<input type="text" id="newLname" pattern="^[a-zA-z0-9 _-]{2,}$" required placeholder="Last Name"/>
Is it possible to disable html validation on second input without modifying pattern or required attributes?
What you could do, put the inputs in separate forms and add the novalidate attribute to the second form.
Check this page for more information.

Angular JS get error to show after user highlights input field and doesnt enter anything

I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>
Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>
The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.

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">

onkeypress is working but onblur is not

I am using the below input field. Here the onkeypress is working fine for tab key and enter key but when I am trying to just create a alert form onblur it is not working at all. I moved the cursor pinting to another input field by mouse click but onblur is not firing at all.
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
Not sure if I am missing anything. Thanks in advance.
These all work, so not sure where the discrepancy is with the rest of your code and the input you provided.
<input onfocus="console.log('focus')" onkeyup="console.log('keyup')" onblur="console.log('blurred')" type="text">
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>
This works:
(both onblur and isDouble fire):
function isDouble(arg) {
alert('isDouble');
return false; // remove this, and only isDouble() will fire.
}
Check this out
http://jsfiddle.net/78N9A/1/ it seems to working
<input autocomplete="off" type="text" name="username" id="username" maxlength="10" onkeypress="isDouble(document.getElementById('username'),event)" onblur="alert(1)" required/>

Categories