I have a react sign-up form. I want to set up an input (checkbox) that holds the value as some text - e.g:
<form onSubmit={this.validateStepTwo} id="registerForm">
<label htmlFor="short_bio">Tell the users a bit about yourself:</label>
<input type="textarea" name="short_bio" className="textarea-small"/>
<label htmlFor="bio_info">Tell the users who you are</label>
<input type="textarea" name="bio_info" className="textarea-large"/>
<label htmlFor="bio_exp">Tell the users what you did</label>
<input type="textarea" name="bio_exp" className="textarea-large"/>
<input type="checkbox" name="instructor" value="I want to be an instructor" />
<input type="submit" value="Register" className="submit"></input>
{this.state.errors !== null ? (
<h1 className="error">{this.state.errors}</h1>
) : ('')}
</form>
Where
<input type="checkbox" name="instructor" value="I want to be an instructor" />
should have a value of "I want to be an instructor" but it doesnt have anything.
I tried doing it like this:
<input ...>I want to be an instructor</input>
but that threw another error.
Is this a react thing or am i missing something in my code? Ive been on the computer for 13 hours so i wouldnt be surprised if i made a dumb mistake.
Checkbox input value is the one sent in the request and not the text that appears afterwards.
If you want it to be the text then do something like this
<input type="checkbox" name="instructor" value="instructor"> I want to be an instructor
Related
I've created a Netlify form on my GatsbyJS site. The form itself works just fine. However, I am having issues changing the subject of my form. I have followed the instructions found in the Netlify forms documentation. In the documentation it states:
"[...] add a subject field to your form, and the value of that field will be used for the notification email subject. This field does not need to be visible to your users."
I am using a hidden subject field with the value of my subject in order to set subject of my form:
<input type="hidden" name="subject" value="My subject" />
I am receiving submission from the form but the subject is not taking effect. Any clues on what I am missing ??
After doing some research I found a error in my code:
Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
so I changed value to be defaultValue instead:
<input type="hidden" name="subject" defaultValue="My subject" />
However, this doesn't seem to solve my issue. Same result as before: I am receiving the form, but subject doesn't seem to take effect.
Been going through Netlify forms debugging guide, but haven't been able to find anything that solves issue. Also tried using HTML to React parser but that didn't do anything either.
The form itselves I am using:
<form
name="contact"
method="POST"
data-netlify="true"
className="hero-form"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<input type="hidden" name="bot-field" />
<input type="hidden" name="subject" value="My subject" />
<p>
<input type="text" name="name" placeholder="Dit navn" />
</p>
<p>
<input type="email" name="email" placeholder="Din email" />
</p>
<p>
<input type="phone" name="phone" placeholder="Dit tlf. nr." />
</p>
<p>
<textarea
name="message"
placeholder="Skriv evt. hvad det handler om"
rows="5"
></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
You can customize the subject of emails by including a subject field.
HTML:
<form
...
data-netlify="true"
data-netlify-honeypot="bot-field"
>
...
<input type="hidden" name="subject" value="Subject to be replaced..."/>
...
</form>
JavaScript:
fetch('/', {
method: 'POST',
headers: { ‘Content-Type’: 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
'subject': 'New message',
…dataForm,
}),
})
Reference: https://community.netlify.com/t/custom-subject-on-forms-not-working/13564
Here is my Code and so have many fields like this :
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"
/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
Company Name is required
</p>
Instead of defining separate message for all mandatory/invalid fields, can't I use single message with place holder for field name? So whenever I want to change message, I can manage this with single line change.
e.g. "${field} is required, ${field} is not valid etc."
please give me a example if this can do
The first solution that crossed my mind was just wrap the error messages in a function:
var displayError = (field) => `${filed} is required`;
And on the HTML
<input type="text" pInputText class="form-control" name="companyName" [(ngModel)]="company.Name" required #companyName="ngModel"/>
<label>Company Name</label>
<p class="ui-message ui-messages-error ui-corner-all" *ngIf="(!companyName.valid && companyName.touched)">
{{ displayError('Company name') }}
</p>
I have a textbox for phonenumber and I need to enter the phonenumber in xxx-xxx-xxxx format in the textbox.
I have tried below examples but thy are not working
<input type='text' ng-model='nerecord.phonenumber' mask='xxx-xxx-xxxx'/>
<input type='text' ng-model='nerecord.phonenumber' ng-pattern='/^[1-10]\d{2}([.-]?)\d{3}\1\d{4}$/'/>
Can anyone help me. How to do this?
Seems your regex isn't correct.
try this one /^\d{3}-\d{3}-\d{4}$/
I don't see anything to handle the case your phone number is invalid.
try to render something like that :
<form name="myForm" ng-submit="yourSaveFunction()">
<p ng-class="{ error: !myForm.phoneNumber.$valid }"> <!-- You must handle your css with this class -->
<label ng-if="!myForm.phoneNumber.$valid">Phone Number not OK</label>
<input name="phoneNumber" type='text' ng-model='nerecord.phonenumber' ng-pattern='someRegex'/> <!-- idk anything about regex -->
</p>
<p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</p>
UI Mask example:
<input ng-model="nerecord.phonenumber" ui-mask="999-999-9999" type="text"/>
Also if you have to validate the input then there is an option in config to prevent clearing the value on blur.
clearOnBlur: false
Mask.js
I created this simple example: http://jsfiddle.net/5Bh59/.
If you switch between AngularJS 1.2.1 and 1.1.1, you'll see the radio buttons don't work properly in either version. If you watch the radio button's $dirty field, 1) for version 1.1.1, it will only be set when the first button is clicked, and 2) for version 1.2.1, it will only be set when the last button is clicked.
I read this answer: AngularJS Radio group not setting $dirty on field but I don't really understand the answer. Not only that but the fiddler example demonstrates the same behavior.
So, is this a bug in AngularJS and how can I work around it?
You either need to give each radio button input a different name, or you need to wrap each radio button in an ng-form (each of which have a different name). If you use two inputs with the same name in the same form, only the last one will be bound to the property on the FormController. If you use different names, then each input will have its own property on the FormController.
Example with different names for each radio button:
http://jsfiddle.net/BEU3V/
<form name="form" novalidate>
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.myRadio1.$dirty}}<br />
Field1 $dirty: {{form.myRadio2.$dirty}}<br />
Value: {{myRadio}}
</form>
Example wrapping with ng-form:
http://jsfiddle.net/39Rrm/1/
<form name="form" novalidate>
<ng-form name="form1">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
</ng-form>
<ng-form name="form2">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.form1.myRadio.$dirty}}<br />
Field2 $dirty: {{form.form2.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
If you'd like a single check for the radio group, you can wrap all the radio buttons in their own ng-form and call it something like name="radioGroup".
http://jsfiddle.net/6VVBL/
<form name="form" novalidate>
<ng-form name="radioGroup">
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Group $valid: {{form.radioGroup.$valid}}<br />
Group $dirty: {{form.radioGroup.$dirty}}<br />
Value: {{myRadio}}
</form>
This answer is related but perhaps not exactly applicable, but after finding and reading this item I felt it valuable to provide, and I don't have enough points to just comment on an answer (which I thought would have been a more appropriate way to respond).
My issue was that I wanted to show a required error (using ng-messages) but when you tabbed through / past the radio button group $touched didn't turn true unless you shift-tabbed back from the next UI element back to the last radio button of the group. (When my form renders the radio buttons are not set - I'm wanting the user to make a selection and not rely on the user accepting a default.)
Here's my code:
<div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}">
<label class="control-label">
What is your pet's gender?
<span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched">
<span ng-message="required">(required)</span>
</span>
</label>
<div>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label>
</div>
</div>
The 'magic' was adding the ng-blur attribute to set 'touched' myself even if only the first radio button was tabbed past.
You may be able to employ a similar tactic for $dirty by calling $setDirty() in the ng-changed attribute.
My web application uses forms laid out as in the example below...
First Name [____________]
Last Name [____________]
Gender () Male () Female
The markup I use is something like...
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
I have the following issues that I don't know how to solve...
I want to have the WHOLE GROUP of radio buttons labelled like any other field (as in the diagram above), but there is nothing to link the label to (i.e. nothing for its "for" attribute, since each radio in the group has its own label just for the value of the individual radio button) A label without a "for" attribute will not pass accessibility compliance.
The <legend> element of the fieldset seems to duplicate the function of the label. Is this really necessary?
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, but that seems a bit hacky to me, and will also introduce complexities elsewhere in my code (which relies on <label> elements to do some nifty validation message markup and various other things)
Thanks in advance.
The first part of Ssollinger's answer is correct:
The code should be:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</fieldset>
When assistive technology hits the male radio button, most will read as: "Gender: male radio button 1 of 2 not selected."
Then you could use CSS on the fieldset, legend, the labels and inputs. If memory serves correctly fieldsets can be a bear to style, so i might end up adding a <div> to it:
<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
<legend>Gender</legend>
<div>
<input type="radio" name="sex" id="sex-m" value="m">
<label for="sex-m">Male</label>
<input type="radio" name="sex" id="sex-f" value="f">
<label for="sex-f">Female</label>
</div>
</fieldset>
Adding this <div> has no accessibility implications.
Like in the comment in ssollinger's answer, you could dump the fieldset and legend approach, but you would need to build everything to make it accessible, an example of a build out
I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, …
This is the correct way to do it. "Gender" is not a label for anything, the labels for the radio boxes are "male" and "female". "Gender" is the legend of the fieldset which groups the radio buttons together. The correct way to implement this form is to remove the "Gender" label and just leave the fieldset with legend "Gender".
Technically, you could probably add a <div> around the radio buttons and point the for= of the "Gender" label to that, but I'm quite sure that this will cause accessibility problems (haven't tried it with a screen reader though) so I would strongly recommend to get rid of the label for "Gender".