CSValidation: A TextField with client-side validation with regexps and JS

Flow
21

Hi,

You can’t. The purpose of CSValidator is just to give the user feedback on the client-side, so it doesn’t pass any validation result back to the server-side Vaadin application. If it did, it could be easily faked by a malicious user.

Because of this,
you MUST MUST MUST
 check the validity of the input on the server-side as well, typically using a Vaadin RegexpValidator with the same regexp (notice that Java and JavaScript regexps have differences). The regexp examples at the demo site do that.

22

I have form with save button. This form have few fields colored red (incorrect input). After pressing save button I want understand what fields are filling incorrect. Does this plugin allow realize that?

23

No, you need to use server-side validators for the fields, as is done in the CSValidation examples.

Here’s how it’s done using the old Form component:

// Use the Vaadin 6 -style form component
final Form form = new Form();
form.setCaption("My Form");
        
// Have a field
final TextField number = new TextField("Your Number");

// A regexp to use for validation
String regexp = "[0-9]
*"; 
        
// Validate the input on client-side
CSValidator validator = new CSValidator();
validator.extend(number);
validator.setRegExp(regexp);
validator.setPreventInvalidTyping(false);
validator.setErrorMessage("Must be a number");

// Validate the input also on server-side
number.addValidator(new RegexpValidator(regexp, "Not a number"));
number.setRequired(true);
number.setRequiredError("Value is required");

form.addField("number", number);

Button ok = new Button("Ok");
form.getFooter().addComponent(ok);
ok.addClickListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        try {
            // Calling commit() runs validate() for the all the fields
            // in the form
            form.commit();
        } catch (InvalidValueException e) {
        }
    }
});

In Vaadin 7 you can use the FieldGroup instead of Form and it also supports commit() and validate(). It’s just not a component like Form is.

24

i have two problems and hope someone can help me:

  1. is there a way to disable the yellow background color of the textfield?! (see attachement)

  2. what is the correct reg. expression for an empty field OR only numbers?
    the only number expresion is: “\d+”

13191.png

25

I don’t use this add-on myself but…what about styling it with css?

26

i´ve tried:


.v-validatedtextfield{
    background: white;
    background-color: white;
}

but it doesn´t work

27

Are you using the correct stylename?
…and is it targeting the correct DOM tag?
If yes then you could try making your styles important like for example:
background-color: white !important;

I would look at the css of the component myself but the online demo is currently down.
Hint at Marko.

28

the stylename ist correct and i´ve tried several tags but it doesn´t work :frowning:


.v-validatedtextfield.invalid,
.v-validatedtextfield.valid,
.v-validatedtextfield-required,
.v-validatedtextfield-required invalid,  
.v-validatedtextfield-required valid,  
.v-validatedtextfield-focus,
.v-validatedtextfield-focus valid,
.v-validatedtextfield-focus invalid,
.v-textarea,
.v-textarea invalid,
.v-textarea valid,
.v-textarea-focus.invalid,
.v-textarea-focus.valid,
.v-textarea.invalid
.v-textarea.valid
{
    background: white !important;
    background-color: white !important;
}
29

It’s textfield, not textarea… The following should set it blue instead of yellow when focused:

.v-textfield-focus.valid, .v-textarea-focus.valid {
    background: none repeat scroll 0 0 blue;
}

The v-validatedtextfield styles were in the old Vaadin 6 compatible version of CSValidation, where there was a separate CSValidatedTextField component. In the Vaadin 7 addon it’s an extension, so the styling goes a bit differently.

30

Hello Marko. I use your addon (version 0.4.1) with input prompt and regexp validation. I type disabled char in empty field. After validation field contain input prompt as inputed value.

may be it’s happen becouse you use getText(…) method in updateFromUIDL(…):

changes: // oldtext = getText(); oldtext = uidl.getStringVariable("text"); 

//        if (!(getText() == null || getText().equals("")) || validateInitialEmpty)
        if (!(oldtext == null || oldtext.equals("")) || validateInitialEmpty)
            validate();
31

Ah, yes, that is probably what happens, as getText() seems to get the element value, which is the input prompt if it is enabled. I didn’t think about that, and it probably also applies to the Vaadin 7 version. I don’t have time to fix it right now, but I’ll look into it later. I hope you can work around the problem meanwhile.

Thanks for reporting the issue.

32

Does this work with 7.3 and the Valo theme? I am updating a project and it does not work any longer.

33

Hi,

Can you provide more information about how it does not work? I made a quick test and
the demo
 seems to work without problems also with Valo and Vaadin 7.3.1. Well, I didn’t test it with another project.

34

Hi Marko,

Blow is my code … a copy of your code, “Count with Limit.”
It is in a Vaadin popup window.
It worked fine upto I updated to Vaadin 7.3 and used Valo. Though I have not tried it without Valo.
Possibly a popup window issue?

validator = new CSValidator();
    validator.extend(msgEditField);
    String jsq = "var maxvalue = " + maxText+ ";\n" +
            "var charsleft = maxvalue - value.length;\n" +
            "var result = null;\n" +
            "if (charsleft > 0)\n" +
            "    result = \"valid \" + charsleft + \" characters left\";\n" +
            "else\n" +
            "    result = \"\" + charsleft + \" characters left\";\n" +
            "result;";
    validator.setJavaScript(jsq);
    validator.setValidateEmpty(true);
35

Marko,
I just created a new UI … most basic possible … same non-functioning.

Its entirety:

public class LandingpageUI extends UI {

@Override
protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);        
    final TextArea limited = new TextArea("Length Limit");
    limited.setColumns(30);
    limited.setRows(5);

    CSValidator validator = new CSValidator();
    validator.extend(limited);
    validator.setJavaScript("var maxvalue = 20;\n" +
                          "var charsleft = maxvalue - value.length;\n" +
                          "var result = null;\n" +
                          "if (charsleft > 0)\n" +
                          "    result = \"valid \" + value.length + \" of \" + maxvalue;\n" +
                          "else\n" +
                          "    result = \"\" + value.length + \" of \" + maxvalue;\n" +
                          "result;");
    validator.setValidateEmpty(true);
    layout.addComponent(limited);
}

}

36

Hi,

I tried your code and it worked perfectly with a new Vaadin 7.3.2 project created with the Vaadin plugin for Eclipse (the stub also uses Valo as the base theme).

I hope you compiled your widget set, theme, etc.

37

Sorry, I cannot get it to work again with or without Valo in 7.3.2.
Of course I compiled the
I am using the 0.5.1 jar. Maybe source compile?
I attached the project archive if you care to look.

Thansk so much.
16704.zip (446 KB)

38

Greg, were you able to get this working? I have the same problem. It just shows the textbox no validations are done.

39

When I switch to Vaadin 7.3.3 the validator returned … but only to the right of the textarea and it was cut off.
My usage required it to be below, like it had worked.
So I just added a TextChangeListener() and set the mode to Eager.
Then recreated the effect in a component.
Yes, network overhead, but it was easiest.

40

I think I am probably using it wrong. I took your landing.zip and just took a code snippet from the original demo : http://magi.app.fi/csvalidation/demo/#javascript.counter.textfield for an ordinary text field with counter. It doesn’t do anything except show the textbox. Here’s the zip file, can you please take a look at it.
I am using 7.3.3. I want to use this to get a number field, masked field and currencies. Appreciate your help.
17224.zip (443 KB)