I have an input tag like this:
<input id="nodename" class="form-control" placeholder=Enter node name" type="text">
Know I want to add a node name into the input, if one is given.
What I try is:
<div id="divForNodeName"><input id="nodename" class="form-control" placeholder="Enter node name" type="text" value= <%- node.name %> ></div>
While node is:
{
name: "A node Name"
}
What I get is:
<div id="divForNodeName"><input id="nodename" class="form-control" placeholder="Enter node name" value="A" node="" name="" type="text"></div>
But what I need is:
<div id="divForNodeName"><input id="nodename" class="form-control" placeholder="Enter node name" value= "A node name" type="text"></div>
So I do not want the splits at the white spaces.
I tried the options <%=, <%- -%> and <%-
but both are not working.
Does someone see my mistake?
The ejs-version I am using is: https://github.com/mde/ejs
It should be value= "<%- node.name %>"
Related
I have a registration page for my app. In order to be able to click the button the username and email input fields must have content inside of them. The password input field has a list of parameters: between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number. and the confirm password input field should match the password input field exactly. I used regex to test the password input field and I used the triple equal operator to test if the passwords matched. I'm using oninput events for both of those cases. Where I'm having trouble is finding the best event to trigger the styles associated with my button depending on it being enabled or disabled. I can tie the styling and element attribute to the same functions I'm using for the password stuff but its not exactly full proof.
JS:
function pwValidation() {
let str = document.getElementById('password').value;
let message = document.getElementById('passwordError');
if (!str.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$#!%&*?])[A-Za-z\d#$#!%&*?]{8,30}$/)) {
message.innerText = 'Passwords must be between 8-30 characters long and contain atleast one: uppercase letter, lowercase letter, special character, & number.';
document.getElementById('signUp-btn').style.color = "rgba(255, 255, 255, 0.38)"
document.getElementById('signUp-btn').style.backgroundColor = "rgba(14, 16, 27, 0.38)"
} else {
message.innerText = '';
}
};
function pwMatch() {
if(document.getElementById('password').value !== document.getElementById('password2').value){
document.getElementById('passwordMatch').innerText = 'Passwords must match.';
} else {
document.getElementById('passwordMatch').innerText = '';
document.getElementById('signUp-btn').style.color = "rgb(255, 255, 255)"
document.getElementById('signUp-btn').style.backgroundColor = "rgb(14, 16, 27)"
}
}
HTML:
<form action="/register/createUser" method="POST">
<fieldset>
<input
type="text"
id="text"
name="username"
class="form-control"
placeholder="Username"
oninput="inputDisable()"
/>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Email"
oninput="inputDisable()"
/>
<div class="password-container">
<input
type="password"
id="password"
name="password"
class="form-control"
placeholder="Password"
oninput="pwValidation()"
/>
<div id="passwordError"></div>
<i class="fa-regular fa-eye-slash" id="togglePassword"></i>
</div>
<div class="password-container">
<input
type="password"
id="password2"
name="password2"
class="form-control"
placeholder="Confirm Password"
oninput="pwMatch()"
/>
<div id="passwordMatch"></div>
<i class="fa-regular fa-eye-slash" id="togglePassword2"></i>
</div>
<button type="submit" id="signUp-btn">Sign Up</button>
</fieldset>
</form>
My logic with the functions isn't full proof and you can easily get the button to display. I need some better logic in my functions or a need a better eventlistener but I lack context as I'm new.
I am trying to test a form in Vue, using the forms from the Bootstrap-Vue library.
I have made a an event for the form (submit) and I added a function to this event (addText).
Then I made a method for this function, telling it to log my input data to the console, but when I press the "save" button and go into the console nothing has been logged.
This used to work with Materialize, so I am wondering if the error lies somewhere with the Bootstrap forms.
Any help will be much appreciated.
<template>
<b-container fluid>
<h2>Add or edit content for this section</h2>
<b-form-group #submit="addText">
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button variant="success">Save</b-button>
</b-form-group>
</b-container>
</template>
<script>
export default {
name: 'NewsSectionCreate',
data() {
return {
headline: null,
secondaryHeadline: null,
text: null
}
},
methods: {
addText(){
console.log(this.headline, this.secondaryHeadline, this.text)
}
}
}
</script>
b-form-group is not a form it's layout that structures the label and inputs, in order to submit that inputs you should wrap the b-form-group tags with a b-form component which has #submit event:
<b-form #submit="addText">
<b-form-group >
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button type="submit" variant="success">Save</b-button>
</b-form-group>
</b-form->
don't forget to add type="submit" to the b-button component.
I'm using ASP classic, I need to send a file and get the textfields to insert on a DB, I did put the ENCTYPE="multipart/form-data" on the form but when I submit it gives me this error:
"Wrong Content-Type. Make sure you have included the attribute
ENCTYPE="multipart/form-data" in your form."
What is strange is that when a leave up the textfields and keep just the file fields it works.
Form:
<div data-role="content">
<form method="post" ENCTYPE="multipart/form-data" action="formteste.asp" >
<div class="ui-field-contain">
<label for="text-4">text1:</label>
<input type="text" data-clear-btn="true" name="text1" value=""></div>
<div class="ui-field-contain">
<label for="text-4">text2:</label>
<input type="text" data-clear-btn="true" name="text2" value=""></div>
<div class="ui-field-contain">
<label for="date-4">Date:</label>
<input type="date" data-clear-btn="true" name="date" id="date-1" value=""></div>
<input type="file" data-clear-btn="true" name="file-1" id="file-1" value="">
<input type="submit" data-inline="true" value="Go">
</form>
</div>
and ASP:
Set Upload = Server.CreateObject("Persits.Upload.1")
text1 = Upload.Form("text1")
Upload.OverwriteFiles = False
On Error Resume Next
Upload.SetMaxSize 1048576 ' Limit files to 1MB
Upload.Save("c:/")
For Each File in Upload.Files
arquive = File.FileName
next
For Each Item in Upload.Form
Response.Write Item.Name & "= " & Item.Value & "<BR>"
Next
If Err <> 0 Then
%>
<div>"<% = Err.Description %>"</div>
<% end if%>
I've searched a lot for this, but none could help with my issue, I hope to get some response.
From the AspUpload Reference
IMPORTANT: The Upload.Files and Upload.Form collections are populated by the Upload.Save method. Therefore, it is incorrect to reference either collection before the Save method is called.
I'm quite new to play and scala. I'm working on form and validations. But I couldn't figure out to get all errors from multiple verification on form.
My form tuple looks like;
val companyMapping = Forms.tuple(
"name" -> nonEmptyText,
"email" -> email,
"password" -> nonEmptyText(8),
"re-password" ->nonEmptyText(8)).verifying(
// Add an additional constraint: both passwords must match
"Passwords don't match", data => {
data._3 == data._4 }
).verifying(
// Second constraint
"Test error", data => {
false }
)
In the view I print global errors and errors, it looks like;
#println(companyForm.globalError)
#println(companyForm.errors)
and output;
Some(FormError(,Passwords don't match,WrappedArray()))
List(FormError(,Passwords don't match,WrappedArray()), FormError(,Test error,WrappedArray()))
At this stage I have absolutely no idea about how to print both of the errors. I'm showing errors separately for the each input and show global errors at the end.
But if passwords match I can see test constraint in the global errors. Other than it only shows password match constraint.
Here is the view part;
#helper.form(action = routes.Login.register) {
<div class="row">
<span class="label">Name</span>
<input type="text" name="name" placeholder="Company Name" value="#companyForm("name").value" >
#if(!companyForm.errors("name").isEmpty){
<span class="error">#Messages(companyForm.errors("name")(0).message,"Company name")</span>
}
</div>
<div class="row">
<span class="label">Email</span>
<input type="text" name="email" placeholder="Email" value="#companyForm("email").value" >
#if(!companyForm.errors("email").isEmpty){
<span class="error">#Messages(companyForm.errors("email")(0).message,companyForm.errors("email")(0).key)</span>
}
</div>
<div class="row">
<span class="label">Password</span>
<input type="password" name="password" placeholder="Password" value="#companyForm("password").value" >
#if(!companyForm.errors("password").isEmpty){
<span class="error">#Messages(companyForm.errors("password")(0).message,8)</span>
}
</div>
<div class="row">
<span class="label">Re-type Password</span>
<input type="password" name="re-password" placeholder="Re-type your password" value="#companyForm("re-password").value" >
#if(!companyForm.errors("re-password").isEmpty){
<span class="error">#Messages(companyForm.errors("re-password")(0).message,8)</span>
}
</div>
#println(companyForm.globalError)
#println(companyForm.errors)
<div class="row">
<span class="label"><button type="submit">Save</button></span>
#companyForm.globalError.map { error =>
<span class="error">#error.message</span>
}
</div>
}
Maybe I'm just confused about those error types. So please can you explain it detailed.
In the re-password section of your template, you currently test if !companyForm.errors("re-password").isEmpty but then only show the message for companyForm.errors("re-password")(0), i.e. the first error only. Even if you have multiple errors.
You have to iterate over companyForm.errors("re-password") to print something for each error.
You can for example output a <span class="error">... for each error, using a for comprehension:
<div class="row">
<span class="label">Re-type Password</span>
<input type="password" name="re-password" placeholder="Re-type your password" value="#companyForm("re-password").value" >
#for (error <- companyForm.errors("re-password")) {
<span class="error">#Messages(error.message,8)</span>
}
</div>
See the play doc for Scala templates for other useful syntax to use in templates.
I have a form with a few textareas in it and I need to figure out a way to automatically insert the word "null" as the textarea values if a user chooses not to include any data in the textarea fields. I would greatly appreciate any one who would be willing to help me out with this. Thank you!
Here's a copy of the code:
<?php
$title = "Add a New Page";
$url = "add";
$metadescription = "Create and publish a new page";
include('/templates/head.php');
echo ('<title>'.$title.'</title>
<meta name="description" content="'.$metadescription.'" />');
include('/templates/meta.php');
echo ('<div id="content">');
include('/page-creator.php');
?>
<h2>Add a New Page</h2>
<form method="post" action="#">
<input type="hidden" name="url" value="null">
<input type="hidden" name="commentform" value="yes">
<h3>Author and Page Information (Required):</h3>
<p><strong>Author Name</strong>: <input style="width:250px;" type="text" name="authorname" value="null"></p>
<hr>
<p><strong>Author URL</strong>: <input style="width:250px;" type="text" name="authorurl" value="null"></p>
<hr>
<p><strong>Page Title</strong>: <input style="width:250px;" type="text" name="title" value="null"></p>
<hr>
<p><strong>Page Date</strong>: <input style="width:250px;" type="text" name="pagedate" value="<?php echo date('D, M d Y, g:ia T'); ?>"></p>
<hr>
<p><strong>Brief Description</strong>: One or two sentences.<br/><br/>
<textarea style="width:95%; height:50px;" name="metadescription">null</textarea></p>
<hr>
<h3>Top Section (Required):</h3>
<p><strong>TOP SECTION CONTENT</strong>: In plain text format (NO HTML) describe the details.<br/><br/>
<textarea style="width:95%; height:100px;" name="topsectioncontent"></textarea></p>
<hr>
<p><strong>TOP SECTION IMAGE</strong>: <input style="width:250px;" type="text" name="topsectionimage"></p>
<hr>
<p><strong>TOP SECTION CODE</strong>: Enter css, html, php or other scripting code.<br/><br/>
<textarea style="width:95%; height:100px;" name="topsectioncode">null</textarea></p>
<hr>
<h3>Middle Section (Optional):</h3>
<p><strong>MIDDLE SECTION CONTENT</strong>: In plain text format (NO HTML) describe the details.<br/><br/>
<textarea style="width:95%; height:100px;" name="middlesectioncontent">null</textarea></p>
<hr>
<p><strong>MIDDLE SECTION IMAGE</strong>: <input style="width:250px;" type="text" name="middlesectionimage" value="null"></p>
<hr>
<p><strong>MIDDLE SECTION CODE</strong>: Enter css, html, php or other scripting code.<br/><br/>
<textarea style="width:95%; height:100px;" name="middlesectioncode">null</textarea></p>
<hr>
<h3>Bottom Section (Optional):</h3>
<p><strong>BOTTOM SECTION CONTENT</strong>: In plain text format (NO HTML) describe the details.<br/><br/>
<textarea style="width:95%; height:100px;" name="bottomsectioncontent">null</textarea></p>
<hr>
<p><strong>BOTTOM SECTION IMAGE</strong>: <input style="width:250px;" type="text" name="bottomsectionimage" value="null"></p>
<hr>
<p><strong>BOTTOM SECTION CODE</strong>: Enter css, html, php or other scripting code.<br/><br/>
<textarea style="width:95%; height:100px;" name="bottomsectioncode">null</textarea></p>
<hr>
<h3>Credits and Footnotes (Optional):</h3>
<p><strong>Ref #1 Name:</strong>: <input style="width:250px;" type="text" name="ref01name" value="null"></p>
<p><strong>Ref #1 URL:</strong>: <input style="width:250px;" type="text" name="ref01url" value="null"></p>
<hr>
<p><strong>Ref #2 Name:</strong>: <input style="width:250px;" type="text" name="ref02name" value="null"></p>
<p><strong>Ref #2 URL:</strong>: <input style="width:250px;" type="text" name="ref02url" value="null"></p>
<hr>
<p><strong>Ref #3 Name:</strong>: <input style="width:250px;" type="text" name="ref03name" value="null"></p>
<p><strong>Ref #3 URL:</strong>: <input style="width:250px;" type="text" name="ref03url" value="null"></p>
<hr>
<input type="submit" value="Publish">
</form>
<?php
include('/templates/footer.php'); ?>
Use a shorthand if:
var myValue = myText.value ? myText.value : 'null';
This is, essentially:
var myValue = function() {
if (myText.value) {
return myText.value;
} else {
return 'null';
}
}
With that said, I don't feel you should include this logic on the client. It may be best if whatever you're sending these values handle this scenario, if you have control over it.
So if you are using jQuery then you would do something like this when they click on the submit button, the return true is there so that it will continue with the submit after this function is run.
$(function() {
$('#submitButton').click(function() {
$('textarea').each(function(element) {
if ($(this).text() === '') {
$(this).text('null');
}
});
return true;
});
});
I have a JSFiddle that you can try to see what it does.
JSFiddle
I assume you don't want the word 'null' appearing in the UI. I am also assuming that you are handling the returned values in some sort of server-side script.
Be that the case, I would simply test the length of the values stored in the textareas, and if the length is zero (and remember to check for entered spaces etc. using TRIMs and string cleaning routines) I would simply do (pseudo code):
if (mytextarea1.text.length == 0)mytextarea1.text='null'
if (mytextarea2.text.length == 0)mytextarea2.text='null'
etc.