We Keep Coding

Form validation could not remove the required css on removeError function

I managed to make all fields are required and validated. But when I try to make a field not required it does not remove CSS.
HTML:
<div class="form-group"><label for="">Your email addresss<span class=""></span></label><input type="email" class="form-control"><small style="display: none"></small></div>
JS Code:
var removeError = function (element, siblings) {
$(element).removeClass("text-error");
siblings.each(function (index, sib) {
if (sib.tagName == "SMALL") {
sib.innerText = ""
$(sib).removeClass("text-danger");
$(sib).removeClass("font-weight-bold");
$(sib).hide();
}
})
};
I tried to experiment by removing CSS class="text-danger" even comment out the below line my function checks for that
<!-- <small style="display: none"></small> -->
Why the above change does not work?
How can I make this utility or configured work for none required field as well,
I am struggling is there any way I can set not required field, I don't want to use a third-party library (such as jQuery Validate plugin) for now as it is not working on my system. Because of most of them use "Form" tag, and could not be managed to use it without form tag.
Demo Code pen: https://codepen.io/dunya/pen/KYdQPd

React.js Bootstrap Add or Remove Input Fields

I'm building a web app using React.js and react-bootstrap. I have a form page where the user can type in symptoms of a disease that they are experiencing. I want the user to be able to type in text and also have the option to remove previously typed text.
An example of it being done in Javascript is here:
http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3
I would like to have the same feature as the link above but using React. Here's the code I have so far for the section, but I'm unsure of the best way to continue.
var closeButton = <Button onClick={this.removeSymptomField()}>Close</Button>;
<Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>
<Button onClick={this.addSymptomField()}>Click to add a new symptom.</Button>
When this.addSymptomField() is called, I want to add an Input field to the page, and when this.removeSymptomField() is called, I want to remove the existing Input field from the page.
Thank you so much!

You could keep a list of current inputs in state and modify that when calling addSymptomField and removeSymptomField
In your component constructor
this.state = { inputs: [] }
In render
<div className="inputs">
{this.renderInputs()}
</div>
And your renderInputs method could look like this
renderInputs() {
return this.state.inputs.map((input, index) => <Input key={index} type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>)
}
Then simply add or remove inputs to/from the list when calling the addSymptomField and removeSymptomField methods

Materalize CSS error labels

Materalize already supports validation for input fields such as email, but I would like to validate input fields such as passwords on the fly. Basically this means adding the error or success label through javacript.
My success so far has been poor. When I call the change() JS function and try to addClass('valid') for example, nothing happens and from what I can see, the class doesn't even appear in the HTML. I know the function is working because if I add a nonsense class like 'test', it does display in the HTML.
Is it not as simple as adding 'valid' or 'invalid' - do I need to meet other criteria before the label will appear?
Any help will be much appreciated.

My solution was to include the error labels as below:
<div class="input-field col s9 offset-s1">
<i class="material-icons prefix">perm_identity</i>
<input id="register_user" name ="register_user" type="text">
<label id="reg-user-error" style="display:none" for="register_user" data-error="short" data-success="good">Username</label>
<label for="register_user">Username</label>
</div>
But making sure to hide the label by default. Then I only had to modify the classes with javascript and show the label. If you don't hide by default, any input automatically validates the label. My JS is:
$('#register_user').on('change',function()
{
if($('#register_user').val().length > 7)
{
if($('#register_user').hasClass('invalid'))
{
$('#register_user').removeClass('invalid');
}
$('#register_user').addClass('valid');
$('#reg-user-error').addClass('active');
$('#reg-user-error').show();
}
else if($('#register_user').val().length < 8)
{
if($('#register_user').hasClass('valid'))
{
$('#register_user').removeClass('valid');
}
$('#register_user').addClass('invalid');
$('#reg-user-error').addClass('active');
$('#reg-user-error').show();
}
});

Ruby Watir syntax for setting a text_field with no id and odd parameters

I'm trying to set a text_field and text area on a webpage that doesn't have an id any longer. I'm guessing the site is trying to avoid automation. The input and textarea tags are inside of a form. Here are the input and textarea tags and what is contained.
<input class="uniform-input ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength" type="text" data-invalid-chars="" data-max-length="50" required="" placeholder="Subject" data-float-label="true" data-ng-model="message.Subject"></input>
<textarea class="uniform-input ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength" data-invalid-chars="" data-max-length="4000" required="" placeholder="Enter your message here" data-ng-keypress="view.error = false" data-float-label="true" data-ng-model="message.Body"></textarea>
Also there is a button that I need to click after submitting the text with this button tag:
<button data-ng-if="!paymentInfo" type="button" class="button button-grey ng-scope" data-ng-click="ctrl.sendMessage()" data-ng-disabled="view.waiting" data-ng-class="{ 'button-disabled': view.waiting }">Send Now</button>
How do I click it when it has no name?
Any help as to how to set this with Watir would be very appreciated. If Watir is unable to do it is there a possible JS workaround that I could use? Please let me know if any further information is needed to help.

Using ruby gem watir
require 'watir-webdriver'
$browser = Watir::Browser.new
$browser.goto "yourwebsite.com"
$x = 0
def test
print "#{$x}"
begin
$browser.text_fields[$x].set "#{$x}"
rescue StandardError => e
puts " no text field found, try again.\n\n"
end
$x += 1
end
Keep changing the value of X to see what text fields you are manipulating. I suppose you could make a loop but you might get an error. Keep calling test until you find what you're looking for.

The elements do look like they have some descriptive attributes. The text fields have a data-ng-model that describes the field. As well, the button has a text that is likely unique.
Therefore, I would do:
browser.text_field(:data_ng_model => 'message.Subject').set('subject text')
browser.textarea(:data_ng_model => 'message.Body').set('body text')
browser.button(:text => 'Send Now').click
I think this approach is more expressive in terms of what your code is doing. As well, it can be more robust as it is not susceptible to fields being re-ordered or other fields being added/removed.

I have been identifying those ng-data objects via xpath, mainly when there is not a more specific way to identify them. Justin is right about an approach that is robust; find a way taht does not need to be refactored down the road. Here is what I would have:
browser.text_field(xpath: '//input[#data-ng-model="message.Subject"]').set("Hello")
browser.button(:text => 'Send Now').click
I prefer not using a lot of xpath, except for when it guarantees me a unique way to find an object on a page.

Use foundation abide to validate length of a text field?

I'm using foundation in a rails app and I'm looking for a way to validate the length of text fields in a form: I'd like to display an error when the text field contains too many characters (but not when it's empty).
I tried to use Foundation's abide and create custom named patterns as explained in the docs.
Here are the contents of my application.js file including the custom patterns upon Foundation initialization:
$(function(){
$(document)
.foundation()
.foundation('abide', {
patterns: {
short_field: /^.{,40}$/,
long_field: /^.{,72}$/
}
});
});
And here is my form code in the view:
<form data-abide>
<div class="long-name-field">
<input type="text" pattern="long_field" placeholder="Long Field">
<small class="error">Too long.</small>
</div>
<div class="short-name-field">
<input type="text" pattern="short_field" placeholder="Short Field">
<small class="error">Too long.</small>
</div>
</form>
The problem is that when I load my form page all the fields always display the error message, whether they're empty, filled under their character limit or exceeding their character limit.
Anyone successfully used abide to do something similar (or knows a better way that is not using custom named patterns)?
Cheers.

I finally managed to make it work!
The problem was that /^.{,40}$/ is not a valid regexp syntax, you have to use /^.{0,40}$/ explicitly.
I mistake it with the /.{5,}/ syntax that you can use to impose a only a lower limit.

I could not make the javascript abide work in my Rails 4 app, so I just added the regex directly as an attribute like so:
<%= text_area_tag 'answer', #current_answer,
:placeholder => 'required', :required => '', :pattern => '^(.){0,1000}$' %>
For validating minimum length only I use:
<%= text_area_tag 'answer', #current_answer,
:placeholder => 'required', :required => '', :pattern => '^(.){100,}$' %>