For the form fields, we can use validator and validation functions to validate and show the errors in extjs. How can I show the similar errors for the server side validation? i.e. Validation happens in backend and errors should be displayed if a certain condition is satisfied.
I have tried using markInvalid("message"), but this only highlights the field and doesn't show the message and also the highlighting goes away when user clicks out of the field.
Any suggestions are appreciated. Thanks.
markInvalid in fact is the official way to go. By default, the message is shown in the tooltip, you can change that through msgTarget: 'under'.
If you want to preserve the error message, then you have to ask yourself, until when. For example, when I change the value in the field, it should no longer show the error message.
To keep the server's message until the value is changed, you have to add to the field a custom validator:
validator: function(val) {
if(this.invalidValue && val==this.invalidValue) return this.invalidMsg;
return true;
}
and then, when the msg comes back from the server, call:
field.invalidValue = field.getValue();
field.invalidMsg = msg;
field.validate();
Related
I'm looking to create custom validation messages on my activeforms in Yii2 for the client side validation. The goal i want to achieve is to get a bootstrap popover on the side of the form field with the validation error message of that field, e.g. password too short or password does not meet the requirements. These messages change dynamicaly based on the given input and validation rules.
I've been looking at using the clientValidateAttribute and create javascripts for the fields, this is working but i'm missing out on setting the proper validation messages coming from the model validation.
This is a simple example to create a popover based on some conditions in the clientValidateAttribute.
return <<<JS
var def = $.Deferred();
if (attribute.name == "email" && value !== "") {
$( ".login-pop" ).popover("show");
} else {
$( ".login-pop" ).popover("destroy");
}
deferred.push(def);
JS;
This will show an popover on the .login-pop class field when the attribute is email and its empty. I've been looking to use the messages array, but it looks like it's only set once.
Perhaps i'm mislead with the validation and there might be easier or better solutions to achieve this goal and be able to validate per field, return the proper messages to be used in a javascript tool.
Thank you.
I have a fixed-position form that can be scrolled out onto the document and filled out anywhere on the page. If they fail to fill out the form properly, the errors are currently echod out onto the form, which is the intended design for that aspect. What I don't currently know how to do is, if the form is completed and $errors[] is empty, to use jQuery scrollTop() to jump down to the bottom.
Could anyone help me out with this? Current javascript involved is:
$("#A_FORM_submit_button").click(function() {
$("#FORM_A").submit( function () {
$.post(
'ajax/FORM_A_processing.php',
$(this).serialize(),
function(data){
$("#A_errors_").html(data);
}
);
return false;
});
});
The PHP involved is simply
if (!empty($errors)){
// echo errors
} else { // echo success message} <-- would like to jump to div as well
edit-- for clarity: not looking to make the page jump happen in the php file, so much as return a value for the jq $.post function to check and then perform an if/else
I might be jumping the gun here but I believe your design is wrong which is why you are running into this problem.
The ideal way of handling form validation is to validate forms via Javascript and when users enter in their information you immediately show some indicator to ask them to correct it. As long as the validation is incorrect, you should not be accepting a form request or making any AJAX calls.
In the off-chance that they do successfully send the data, you should be doing a validation check via PHP as well which, if failed, would redirect to the original page with the form. From there you could do whatever error handling you want but ideally you would retain the information they entered and indicate why it was wrong (Javascript should catch this but I guess if it gets here the user might have JS off or your validation logic might be wrong)
If I understand correctly, it seems like you are doing your error handling with Javascript (that's fine) but showing the error via PHP. As Hydra IO said don't confuse client-side and server side. Make them handle what they need to handle.
Hope this helps.
#aug described the scenario very clearly.
In code it translates in something like this
$('form').submit(function(){
form_data = $(this).serialize();
if(!validate(form_data))
{
// deal with validation, show error messages
return false;
}
else
{
// Submit form, either via Ajax $.post() or by just returning TRUE
}
});
The validate() function is up to you to work out.
I have a signup form built with AngularJS using frontend and backend (with Express.js) input verification. Whenever a user enters an invalid email address, like qwidjq&/%, I'd like to show an error message and send the form back to the user. The email input field should contain the invalid email as the value.
The problem is that I cannot init input(type="email") fields with invalid email values. Only input(type="text") works. Here is an example.
Any ideas how to work around this restriction? I don't want to use input(type="text") and a custom directive. I'd like to keep input(type="email") as it changes keyboard layout on mobile devices.
Thanks in advance!
Perhaps display the bad text NEXT to the input element, e.g.
<input type="email" /><span id="emailerror">qidjq&/% is not a valid address</span>
You can initialise your input by initialising your model with data.
Example: http://plnkr.co/edit/TUJ6lv?p=preview
Unfortunately initializing a model to display invalid data would require patching AngularJS. In fact if you initialize any validated field with invalid data, it will appear blank.
Here is the code that is causing the email input to display blank without a valid email:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js
(line 622)
var emailValidator = function(value) {
if (ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value)) {
ctrl.$setValidity('email', true);
return value;
} else {
ctrl.$setValidity('email', false);
return undefined;
}
};
Forgive me if I'm being stupid but can't you just disable the button on your form while the inputs are invalid. Alternatively, don't leave the form until you have had a positive response to your ajax request. If you get a negative response then show an error message. The data will still be in the form. I'm not familiar with Express.js so perhaps that is forcing you to refresh the form. I thought the whole point of using frameworks like Angular is to give you total control of the UI.
I'm working on designing a new process for internal job submission for work which now involves javascript for it to work effectively.
Scripting is not my forte but that hasn't deterred me, I've been able to find three different pieces of code to insert into the various buttons and fields and they've done what they should do. My problem is I need to combine some of these for an extra validation on submit. This is where I fall short.
The process:
There is a required field in the form which currently runs a custom validation script to check a certain format specific to the code needed for a job. This runs well and I was even able to add an alert and hint images that show when incorrect and a little tick when correct. Beautiful.
The second major part of the form is in the submit button. I hacked together a code which not only emails the submitted form with fields as the subject line but also makes all fields read only before doing so. Brilliant.
Here's the messy part. A user can enter a correct or incorrect required code and the validator does its bit but that doesn't stop them from still submitting the form. Fine. I can fix that by running the validator again on the submit button so it not only gives user feedback on blur of the required field but again validates on submit so if the field is incorrect the submit stops until the user has the correct value in the field. This is where my knowledge stops like a cliff edge and I can't seem to build a bridge.
I've tried numerous ways of calling the field value then just running the same validation script with some if and else statements but it just doesn't work.
Can anyone help? Current code for submission button below but keep in mind that the validation section of this code is also attached to the required field directly (this affects it?):
function OR_Stuff() {
var ProjectTitle = getField("ProjectTitle").value;
var Brand = getField("Brand").value;
var Name = getField("Name").value;
var Noosh = getField("INT_NooshCode").value;
for (var i = 0 ; i < this.numFields ; i++) {
var f = this.getField(this.getNthFieldName(i));
if (f.type != "Submit") // Change f.type to button name in form that the action is applied to
{
f.readonly = true;
}
}
this.mailDoc({
cTo: "email",
cBcc: "email",
cSubject: "NEW JOB: "+Brand+" - "+ProjectTitle+" - "+Noosh,
cMsg: "Thanks "+Name+" for sending through this job."
});
}
var re = /^\d{5}[A-Z]\d{2}$/
if (re.test(INT_NooshCode.value) == false) {
this.getField("RequiredAlert").display = display.visible;
this.getField("NooshTick").display = display.hidden;
app.alert("Sorry, we can't start a project without a Noosh code. \n\nPlease enter a valid Noosh code EG: 34256P02");
}
else {
OR_Stuff();
}
1.is there a way to do form_set_error in client side so if there is error in javascript validate it will set error and wont let user process the other steps? js can be disabled so i want to take extra caution...
where is a complete list of drupal javascript function reference like Drupal.t and stuff?
how can i change the error messages of form set error (the default errors like { fieldname... field is required } ?
how can i do errors that will show below/above/inline the field ?
JavaScript in Drupal, Covers the Drupal JavaScript API, AHAH forms, and the kind of stuff your looking for. The Quick start Guide is pretty good.
As for validation, you're right, Javascript can be turned off. JavaScript validation is mostly done for usability, since the user doesn't have to wait to POST his form in order to receive an error message. JavaScript lets him know in real time if for example, his password is too weak, or email invalid, before submitting the form.
JavaScript validation however is not good for security. That's where you will need to do server-side validation. form_set_error will take care of the server-side validation.
So if you have a form that looks like:
function form_foo($form_state) {
$form['foo'] = array(
'#type' => 'textfield',
'#title' => t('bar'),
'#default_value' => $object['foo'],
'#size' => 60,
'#maxlength' => 64,
'#description' => t('baz'),
);
return $form;
}
The server-side validation would look like:
function form_foo_validate($form, &$form_state) {
if (empty($form_state['values']['foo'])) {
form_set_error('foo', t('Foo cannot be empty.'));
}
}
If the bar textfield in the form is indeed empty, when the user submits the form bar will be highlighted, the 'Foo cannot be empty' error message will appear, and the form _submit hook won't be called.
For JavaScript functionality, the Overview of Drupal JavaScript API document has most of the information you will need.