in my form fields i've got watermark text that disappears when the user is typing something in them.
but then, i cannot use jquery validation plugin http://docs.jquery.com/Plugins/Validation#Example for checking that the user has typed something in the fields cause in either way, they will contain text.
so how can i validate that the user type something when they already contain watermark text and the plugin will assume they are filled.
You could store the watermark text for each field somewhere (For example the rel attribute of the element, or in the title if the watermark text is somthing like "enter your name here", or in a custom JS array for 100% clean and valid HTML) and write your own validation method that checks whether the field's content is equal to the default value.
See Plugins/Validation/Validator/addMethod on how to implement your own validation methods.
you must use addmethod:
jQuery.validator.addMethod("watermarkmethod", function(value, element) {
return this.optional(element) || value != 'your watermark text';
}, "Please do not leave empty");
Related
I can't seem to find anything similar to this right now, but I am pretty sure I have seen something like it before.
I am currently able to use either input or textarea html tags and the placeholder attribute to get something close to what I want, but I also want to provide the user the ability to copy the placeholder text and enter/paste it in the same box as an entry. Is this possible?
An use case would be a place holder of a common directory path:
box1#mtk:/path/to/data/20180202_TextFile.txt
I want the user to be able to copy and paste "box1#mtk:/path/to/data/" into the box so they just have to change the text file name.
I can't force value to be the placeholder because I don't want users accidentally submitting forms without modifying all fields.
So is it possible to have selectable / copyable placeholders?
No you have to choose between placeholder and value. I would just use value in combination with a script that enables the button when all the fields are different from their default value or prints an error message if they are not eg:
if(document.getElementById(“value1”).value !== “DEFAULT TEXT” && document.getElementById(“value2”).value !== “DEFAULT TEXT” && ......) {
document.getElementById(“submit”).disabled = false;
}
So I have this json format of
{
questionID: int
studentAnswer: "String"
}
The studentAnswer field is populated from whatever is inputted in an HTML textarea. If I input something in one line only, the json is valid. But if I input something where i press enter to go to the next line, the json becomes invalid. I need the studentAnswer to be able to hold the input value with multiple lines. How can I fix this?
The problem is that multiline json's aren't valid. Since you're using a textarea, perhaps you can resize the textarea, restrict it, sanitize its inputs, or change the form type.
Ultimately, you want whatever the user input to be one line. Try this option out:
Is it possible to disable textarea's multiline option?
I have this working code which I'm using to set placeholder values for username and password fields:
<script>document.getElementById("user_login").setAttribute("placeholder","Please enter your Email Address");</script>
and
<script>document.getElementById("user_pass").setAttribute("placeholder","Please enter your Password");</script>
Now I'm trying to apply this to a 3rd box which has the input ID #memb_password_send-1-email-input but this isn't a straight up element, it's an input field and using this ID (as above) obviously doesn't work.
Here is a picture of console:
What would be the correct way to target this field with placeholder text?
Same method used to provide placeholder for username and password fields would work in this case as well as those are input fields as well. Just make sure that when you are writing this code in in-line script, do this after that input box has rendered i.e. after it's markup so that element is available to get selected.
I have form where a user can add more input boxes on button click.
User can have as much input boxes as they want.
I do not plan to add a button for removing fields.
They default number of input boxes is 2.
Say the user decides to add 3 more, now there are a total of 5.
For validation, I would like to check if the input box is empty or if the input has all spaces like: " " no matter how many spaces as long as it has nothing else but space.
I can do the check for an empty input by checking length, but how can I check for the latter?
Is there a regular expression for any number of consecutive spaces?
Thanks!
PS: I am using jQuery with jQuery mobile
You can check if an input field is blank by checking its .value.length, as you already know. To check if it only contains whitespace, then try this: (assuming that the input is stored in a variable called input)
if (!input.value.trim().length) // oh noes! it's blank or whitespace-filled!
Reference.
Your question has a few components:
how to add input fields dynamically?
how to loop through these fields and validate them as well?
how to check whether a field really contains content, not just empty values?
We need to address all of these issues in a systematic manner:
Starting with the easiest - detecting empty string:
if (value.replace(/\s/g,'')=='') //string is empty
Next, to add input fields dynamically:
var myinput=document.createElement('input');
document.body.appendChild(myinput);
//the trick here is to "remember" this element for later use
document.myinputs=[];
document.myinputs.push(myinput);
To check all your input fields, you check the static ones first, then loop through the dynamic input fields:
valid=true; //default to true unless detected otherwise
for (var i=0;i<document.myinputs.length;i++){
var input=document.myinputs[i];
if (input.value.replace(/\s/g,'')=='') valid=false;
}
alert(valid);
I have a form that performs calculations live as the user enters data. However, some of the calculations require that certain fields are filled out first.
For instance, if I have 4 fields, and field 4 is a percentage of field 1, I have to make sure that the user has a value for field 1 before they can enter data into field 4.
One thought I have is to give each field a data-step attribute with a sequential number. When the form first comes up, all the fields are disabled except the first field. When valid data is entered into the first field, the fields for the next step are enabled. This also assumes that if the user then blanks out field 1 that the rest of the fields are then blanked out and disabled again.
I'm pretty certain this solution would work, but would require a decent amount of JS code (jQuery) to ensure it works properly, as well as server-side validations. But one "gotcha" that I'm slightly puzzled on is if you do a submit and server-side validation fails and you render the form again, how to maintain the disabled/enabled state of the form fields? But I guess I'll deal with that problem after the current one.
So the question is, is this a decent solution to the problem of forms that must be filled out sequentially? Has anyone else found a better solution or a more elegant method than what I'm planning on implementing? I'm fine with generic concepts or ideas; I can pretty much code anything I need, I'm just not sure of best practice to this particular problem.
It seems that you don't need to check an order but rather need to rule out the cases of form filled wrong (e.g. field 4 is filled, and field 1 is not).
I suggest you to allow user to enter anything they want, but to highlight the required fields as long as they're empty and to prevent form submittal until everything is correct.
What you propose is a good way of doing this. The JS code will not be that huge. You can use class names on the fields to determine which is the active one. You can always pass back some JS variables or a hidden field to tell the page which is active after server-side validation.
Why not validate values in client-side? Process just like you've thought. Set onchange event handler to your inputs, and in handler validate the value. If correct, enable the next input, if incorrect, present disablings stay. Only few lines of script is required.
if(option1 == "" && option2 != "")
{
alert("Please fill options in a Sequence");
}
else if(option2 == "" && option3 != "")
{
alert("Please fill options in a Sequence");
}
else if(option3 == "" && option4 != "")
{
alert("Please fill options in a Sequence");
}
else if(option4 == "" && option5 != "")
{
alert("Please fill options in a Sequence");
}