I had the form using the simple form like this:
<%= f.input :last_name %>
When there is validation error on form the validation error message are display after the input text box like this:
<div class="input string required test_last_name field_with_errors"><label class="string required" for="test_last_name"><abbr title="required">*</abbr> Last name</label>
<input class="string required" id="test_last_name" name="test[last_name]" type="text" value="">
<span class="error">can't be blank</span>
</div>
I would like to generate html like below to display the message after the label :
<div class="input string required test_last_name field_with_errors"><label class="string required" for="test_last_name"><abbr title="required">*</abbr> Last name</label> <span class="error">can't be blank</span>
<input class="string required" id="test_last_name" name="test[last_name]" type="text" value="">
</div>
Any help will be really appreciated.
Thanks
Sabbu
This is a long shot, but try
<%= f.input :last_name as: :required %>
I put 2 and 2 together that this was a ruby project after the fact.
<div class="input string required test_last_name field_with_errors"> <label class="string required" for="test_last_name"><abbr title="required">*</abbr> Last name</label><span class="error"> can't be blank</span>
<input class="string required" id="test_last_name" name="test[last_name]" type="text" value="">
</div>
I found the answer and I am posting here so that it might help somebody.
In the simple for configuartion file just put the error tag before input like this :
b.use :error, wrap_with: { tag: :span, class: :error }
b.use :label_input
And add this css on error class:
float:right
Thanks
Sabbu
Related
public function storeProject()
{
$this->validate();
$fileName = $this->files->store('uploads');
Project::create([
'title' => $this->title,
'description' => $this->description,
'files' => $fileName,
'skills' => $this->skills,
]);
session()->flash('message', 'Your Project has been posted Successfully!');
}
My View
#section('title', 'Post a job')
<div>
<div class="py-12 font-sans">
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
<div class="m-4 p-4 bg-gradient-to-r from-blue-800 via-blue-700 to-blue-600 text-white rounded-md">
<h2 class="text-4xl">Tell us what you need done!</h2>
<p class="break-words mt-5">Within minutes, get in touch with knowledgeable independent contractors. View
their profiles, give them feedback, look at their portfolios, and talk with them. Only pay the
freelancer once you are completely satisfied with their job.
</p>
</div>
<div>
{{-- Form is located here --}}
<form enctype="multipart/form-data">
<div class="mb-6">
<label for="title">Choose a Title for your Project</label>
<input type="title" id="title" name="title" wire:model.lazy="title"
placeholder="e.g. Build me a website">
</div>
<div class="mb-6">
<label for="message">Tells more about your project</label>
<textarea id="description" name="description" rows="4" wire:model.lazy="description"
placeholder="Describe your project here..." maxlength="4000"></textarea>
</div>
<div class="mb-6">
<label for="user_avatar">Upload file</label>
<input wire:model="files" aria-describedby="user_avatar_help" id="user_avatar" name="files"
type="file">
</div>
<div class="mb-6">
<label for="skills">
What skills are required</label>
<p class="break-words mt-2">Enter up to 5 skills that best describe your project. Freelancers
will use these skills to find projects they are most interested and experienced in.</p>
<input type="text" id="skills" name="skills" data-role="tags-input"
wire:model.lazy="skills" placeholder="Enter skills here separated by commas...">
</div>
<button type="submit" wire:click="storeProject">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. This is my blade code.
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
After clicking on submit, this is my url http://127.0.0.1:8000/post-project?title=Iphone+XR+Mini+Updated&description=I+need+it&files=Gilles+Ashley%27s+CV.pdf&skills=Mysql%2C+C%2B%2B+etc. What is wrong with my codes please? Any help?
You need to change the form tag and the submit button:
<form wire:submit.prevent="storeProject">
<button type="submit">
Submit
</button>
This will take care of the page refresh and the GET call. You do not need enctype="multipart/form-data" when using Livewire.
I think that you have created a controller function storeProject() and a blade view with your <form enctype="multipart/form-data"> which is completely wrong. Check here how livewire should work https://laracasts.com/
I'm using the native HTML5 validation for an "email" field and it works fine! However, I would like to increase it to a specific case, where I do not want to accept emails with "free" domains (gmail, hotmail, etc).
I did the regular expression and tested it and it worked correctly (Here you can do the test: https://regex101.com/r/wBt3YN/1). But when applying to the pattern of the email field, nothing happens.
How to proceed?
Some strings:
maykel#gmail.com -> Can't allow
maykel#marfin.com -> Can allow
maykel#outlook.com -> Can't allow
Regex Pattern
^([\w-.]+#(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$
My form
<form>
<div class="field">
<label for="email">Email Corporativo</label>
<input
type="email"
name="email"
id="email"
value=""
pattern="^([\w-.]+#(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$"
title="Utilize seu email corporativo"
placeholder=""
required
>
</div>
<input type="submit" value="ENVIAR">
</form>
Here is my code where I do not allow yahoo & hotmail. However, e-mail validation is a very delicate thing.
<form>
<div class="field">
<label for="email">Email Corporativo</label>
<input
type="email"
name="email"
id="email"
value=""
pattern="^[^#]+#(?!(yahoo|hotmail))[^#]+\.[a-z]{2,}$"
title="Utilize seu email corporativo"
placeholder=""
required
>
</div>
<input type="submit" value="ENVIAR">
</form>
I have 3 bootstrap switches to handle read/update/create permissions.
They area written as :
<%= f.check_box :allow_read, :data => { :size=>'medium',
'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}",
'off-text'=> "#{t('no').upcase}" } %>
<%= f.check_box :allow_update, :data => { :size=>'medium',
'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}",
'off-text'=> "#{t('no').upcase}" } %>
<%= f.check_box :allow_create, :data => { :size=>'medium',
'on-color'=>'success', 'on-text'=> "#{t('yes').upcase}",
'off-text'=> "#{t('no').upcase}" } %>
and displayed as :
I am trying to use the switchChange.bootstrapSwitch method to change other é switches when one switch is toggled by the user .
When :allow_read is switch OFF , then :allow_update and :allow_create should be switched OFF too...
So I wrote the following js code to handle this case ...
$('input[name="permission[allow_read]"]').on('switchChange.bootstrapSwitch', function(event, state) {
if (event.type == "switchChange" && state == false){
$('input[name="permission[allow_update]"]').bootstrapSwitch('state', false, true); // disallow update
$('input[name="permission[allow_create]"]').bootstrapSwitch('state', false, true); // disallow create
}
});
But it's not working fine ... as it's inserting and OFF text before the switch, however the toggling is performed :
what could be wrong ?
thanks for feedback
--UPDATE ---
forgot to add the generated HTML...
<div class="col-sm-9">
<input name="permission[allow_read]" type="hidden" value="0">
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-medium bootstrap-switch-animate bootstrap-switch-id-permission_allow_read">
<div class="bootstrap-switch-container">
<span class="bootstrap-switch-handle-on bootstrap-switch-success">OUI</span>
<label class="bootstrap-switch-label"> </label>
<span class="bootstrap-switch-handle-off bootstrap-switch-default">NON</span>
<input type="checkbox" value="1" checked="checked" name="permission[allow_read]" id="permission_allow_read">
</div>
</div>
</div>
I guess there is something wrong with html generated by the Rails view helper and Bootstrap switch...
back to a standard html tag , it works correctly
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<p class='col-sm-3 control-label' >READ</p>
<div class="col-sm-9">
<input id="allow_read" name="permission[allow_read]" type="checkbox" value="1" data-size ='medium', data-on-color ='success' data-on-text = "YES" data-off-text = "NO" />
</div>
</div>
</div>
</div>
and similar switches for update and create.... the js script runs very well...
Is it possible to do something like this:
<field:text id="foo" label="Foo Label" model="model.foo" placeholder="foo" />
which would be compiled to:
<div class="control-group">
<label class="control-label" for="foo">Foo Label</label>
<div class="controls">
<input type="text" id="foo" placeholder="foo" ng-model="model.foo">
</div>
</div>
I tried to make a example, but Plunker wouldn't let me save my example... uploaded it to dropbox: https://dl.dropbox.com/u/2862814/plunk.zip
The example breaks with stuff like ng-change. This is due the compilation of the ng-change directive. I tried it with a high priority to the fieldText directive, but doesn't fix it.
You were pretty close with in your example, but you have to put ng-change on the input-field in the template. Your old code:
<field:text ng-change="updateHidden()" ...
Change this to
<field:text change="updateHidden()" ...
and in the directive (see http://docs.angularjs.org/guide/directive - & or &attr - provides a way to execute an expression in the context of the parent scope.)
{scope:{change:'&' ...
and finally the directive template
<input ng-change="change()" ...
Here is a modiefied and working plunkr: http://plnkr.co/edit/QmQjGQQBRtDmkCka0dul?p=preview
<field:text id="too" label="Too" model="model.too" placeholder="too" change="updateHidden()"></field:text>
<script type="text/ng-template" id="/tpl.html">
<div class="control-group">
<label class="control-label" for="{{id}}">{{label}}</label>
<div class="controls">
<input ng-change="change()" type="text" id="{{id}}" placeholder="{{placeholder}}"
ng-model="model">
</div>
</div>
</script>
directive('fieldText',function(){
return {
restrict:'E',
templateUrl:'/tpl.html',
scope:{change:'&',id:'#',model:'=',placeholder:'#',label:'#'}
}
})
I'm just wondering what the general pattern for validating forms in EmberJS? For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation. This works great up to the point where I need to do something with the fields that have errors. I would like to just add a class to the fields with errors but not really sure how to do it. Should the IndexView validate the form or should I create a view for each field that validates its self on blur? Below is what I have in my IndexView.
App.IndexView = Ember.View.extend
create: (model) ->
valid = #_validate model
if valid is true
#get('controller').send 'createUser'
else
# HANDLE THE FIELDS WITH ERRORS
_validate: (model) ->
invalid = []
validations = {
firstName: #_validateString model.get 'firstName'
lastName: #_validateString model.get 'lastName'
email: #_validateEmail model.get 'email'
password: #_validatePassword model.get 'password'
accountType: #_validateString model.get 'accountType'
}
# This will get all of the values then runs uniq to see if the
# form is valid
validForm = _.chain(validations).values().uniq().value()
if validForm.length is 1 and validForm[0]
true
else
# other wise build up an array of the fields with issues
for field, val of validations
if val is false
invalid.push field
invalid
_validateString: (str) ->
return false unless str
if str isnt '' then true else false
_validateEmail: (str) ->
pattern = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
pattern.test str
_validatePassword: (str) ->
return false unless str
if str.length >= 6 then true else false
and the template
<div class="row">
<div class="span12">
<div class="signup">
<form class="form-horizontal offset3">
<div class="control-group">
<label class="control-label" for="first_name">First Name</label>
<div class="controls">
{{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="last_name">Last Name</label>
<div class="controls">
{{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
{{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
{{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="">Account Type</label>
<div class="controls">
{{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}}
<label class="radio">
{{view RadioButton checked='false' value="landlord"}}
Landlord
</label>
<label class="radio">
{{view RadioButton checked='false' required="true" value="tenant"}}
Tenant
</label>
{{/view}}
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
I'm just wondering what the general pattern for validating forms in EmberJS?
There seem to be several patterns in use. It depends quite a bit on what is being validated, with the general strategy being to keep business logic far from the view layer as possible. Here are some links that may prove useful:
validations-in-emberjs-application.html recommends performing validation at the controller level, with views are used to trigger validation when focus changes. This screencast demonstrates how this pattern can be used to validate a few simple form-fields.
Asynchronous-Form-Field-Validation-With-Ember provides a few reusable components that can be used to perform simple validations at the view layer.
ember-validations is a library that can be used to add active-record style validation capabilities to any ember-object
For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation. This works great up to the point where I need to do something with the fields that have errors. I would like to just add a class to the field of erro but not really sure how to do it.
since you're looking to validate a number of fields at once it might make more sense to move this validation logic into the controller. Either way, typically you would bind class attributes for a given field to a property as follows:
<div class="controls" {{bindAttr class=firstNameError:error:success}}>
{{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>
So with this in place add a firstNameError property that returns true/false depending on results of your validation. Given your implementation it would probably make sense to set this property when _validate is run, but it could also be a computed property that performs validation in real-time.
Should the IndexView validate the form or should I create a view for each field that validates its self on blur?
That really depends on what you want the user experience to be like. FWIW my vote is to go with on-blur.