I have this in my view :
<input id="#Html.TextBoxFor(m => m.UserName)" type="text" placeholder="Username" autofocus required>
<input id="(#Html.PasswordFor(m => m.Password))" type="password" placeholder="Password" required>
Its working but my result is
What am I doing wrong?
Either you want to put HTML as tags:
<input id="UserName" type="text" placeholder="Username" value="#Model.UserName" autofocus required />
<input id="Password" type="password" placeholder="Password" value="#Model.Password" required />
Or let Razor to do it for you:
#Html.TextBoxFor(m => m.UserName);
#Html.PasswordFor(m => m.Password);
You are mixing it together. Your example starts with pure HTML, then it finds the Razor command which renders another input tags, inside the pure HTML one. Prefer Razor code when you need to return the model type.
Related
I am trying to take an input from a form made in a jsp called "start.jsp".
<body>
<form action=/addResults"method="post" modelAttribute="results" required="true">
<label for="email">Email Address:</label><br>
<input type="text" id="email" name="email" maxlength="50"required><br>
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" maxlength="100"required>
<label for="age">Age (0-120):</label><br>
<input type="text" id="age" name="age" min="0" max="120"required>
<label for="gender">Gender:</label><br>
<input type="text" id="gender" name="gender" maxlength="45"required>
<input type="submit" value="Submit">
</form>
</p>
</body>
I'm then using code in my Controller to add this to a Class. Below is my controller code.
#RequestMapping("/addResults")
public String newHotel(Model model) {
model.addAttribute("results", new TestResults());
return "start";
}
But when I execute my Spring project it gives me an error of 404-not found. I've tried checking and rechecking my links and I can't understand how the links can't find the other pages etc. Any help would very great as I'm quite new to spring and the franework. Fred
I have two v-model
case 1:
<input type="date" v-model="date" class="form-control" id="date" placeholder="Date" v-on:change="onDateChange()">
<input type="text" v-model="editForm.u1" class="form-control" id="u1" placeholder="U1">
this works fine
case 2:
<input type="date" v-model="date" class="form-control" id="date" placeholder="Date" :change="onDateChange()">
<input type="text" v-model="editForm.u1" class="form-control" id="u1" placeholder="U1">
In this even changing u1 triggers onDateChange();
:change binds the attribute, as in v-bind:change="onDateChange()"
#change="onDateChange() is the shorthand syntax for v-on.
I have a problem in an application I'm developing, if I have input fields with type 'password' then another input field is populated with data from a completely different element.
If I set the type of the element that is 'password' to 'text' there is no problem.
Unforunatley I can't post an example of jsFiddle, but I've searched around and found other people having a problem with Firefox with an older version.
I'm using version: 43.0b9 with Firebug 2.0.13
IE, Chrome and Safari do not do this with the exact same page loaded, but its very repeatable and very realiable in FireFox.
I've set the attribute autocomplete="off" but no difference.
This problem has me scratching my head...I've commented out just about everything, but the problem still occurs, some how my name and login password are finding there way into two INPUT elements, the same page in Chrome, IE and Safari does not do this.
I was having the same problem, and finally solved it after reading this answer to other similar question: https://stackoverflow.com/a/10745884/6938721
In my case, I had a lot of input fields divided into multiple fieldsets, and sent them through AJAX.
Well, the solution was to surround each <fieldset>...</fieldset> with <form>...</form> labels.
Originally I had something like:
<fieldset>
<input type="text" name="field1">
<input type="password" name="field2">
<input type="password" name="field3">
</fieldset>
<fieldset>
<input type="text" name="field4">
<input type="password" name="field5">
<input type="password" name="field6">
</fieldset>
And after applying the solution I get:
<form>
<fieldset>
<input type="text" name="field1">
<input type="password" name="field2">
<input type="password" name="field3">
</fieldset>
</form>
<form>
<fieldset>
<input type="text" name="field4">
<input type="password" name="field5">
<input type="password" name="field6">
</fieldset>
</form>
Edit:
The key is to not have more than 3 password inputs inside a <form> block. The document works as a <form> block by itself
Hope this helps
I want to check the first checkbox with id=user_accepts_terms. This is the HTML:
<div class="check-group">
<div class="checkbox">
<input type="hidden" value="0" name="user[accepts_terms]">
</input>
<input id="user_accepts_terms" type="checkbox" value="1" name="user[accepts_terms]">
</input>
<label class="" for="user_accepts_terms">
</label>
</div>
<div class="checkbox">
<input type="hidden" value="0" name="user[subscribed]">
</input>
<input id="user_subscribed" type="checkbox" value="1" name="user[subscribed]">
</input>
<label class="m-focus" for="user_subscribed">
</label>
</div>
I want to check the first checkbox with id=user_accepts_terms. Tried this among other things, but no luck:
find('.check-group').all('.checkbox')[0].find("#user_accepts_terms").set(true)
The .find("#user_accepts_terms").set(true) doesn't work, it says unable to find the css.
This piece works as follows:
2.1.0 :097 > find('.check-group').all('.checkbox')[0].text
=> "I accept the terms of use and privacy policy"
The .all('.checkbox')[0] portion is already finding the checkbox you want, and the .find("#user_accepts_terms") portion is trying to find another element below that, which doesn't exist. Either of the following should work, provided the syntax is correct (I'm unfamiliar with it)
find('.check-group').find("#user_accepts_terms").set(true)
find('.check-group').all('.checkbox')[0].set(true)
Using the jQuery Validation plug-in for the following form:
<form id="information" method="post" action="#">
<fieldset>
<legend>Please enter your contact details</legend>
<span id="invalid-name"></span>
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<span id="invalid-email"></span>
<div id="id">
<label for="email">Email: (*)</label>
<input type="text" id="email" class="details" name="email" maxlength="50" />
</div>
</fieldset>
<fieldset>
<legend>Write your question here (*)</legend>
<span id="invalid-text"></span>
<textarea id="text" name="text" rows="8" cols="8"></textarea>
<div id="submission">
<input type="submit" id="submit" value="Send" name="send"/>
</div>
<p class="required">(*) Required</p>
</fieldset>
</form>
How can I place the errors inside the span tags? (#invalid-name, #invalid-email, #invalid-text)
I read the documentation about error placement but I did not get how it works.
Is it possible to handle each single error and place it in the specified element?
Thank you
You can also manually add error labels in places you need them. In my particular case I had a more complex form with checkbox lists etc. where an insert or insert after would break the layout. Rather than doing this you can take advantage of the fact that the validation script will evaluate if an existing label tag exists for the specified field and use it.
Consider:
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
Now add the following line:
<label for="name" class="error" generated="true"></label>
which is standard error label:
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<div id="id-error">
<label for="name" class="error" generated="true"></label>
<div>
jQuery will use this label rather than generating a new one. Sorry I could not find any official documentation on this but found other posts that came across this behaviour.
This is a basic structure, you can use whatever selector you would like in the method. You have the error element and the element that was invalid.
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.prev());
}
});
Or to target the ID, you could do
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo('#invalid-' + element.attr('id'));
}
});
Not tested, but should work.
I found that using .insertAfter rather than .appendTo works:
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.insertAfter('#invalid-' + element.attr('id'));
}
});
I'm using the metadata extension with the validator.. (note, I'm setting it to use the data-meta attribute on the markup...)
<input ... data=meta='{
errorLabel: "#someotherid"
,validate: {
name:true
}
}' >
then in code...
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo($(
$(element).metadata().errorLabel
));
}
});
I've been using the metadata for a lot of similar functionality, which works rather nicely... note, I used the single ticks (apostrophes) around the meta data, this way you can use a JSON serializer server-side to inject into that portion of the tag (which should use double-quotes around strings)... a literal apos may be an issue though, (replace "'" with "\x27" in the string).