悪い要求/フォームがモーダルフォームに定義されていませんフラスコ

Question

私のフラスコのアプリケーションからさまざまな入力データを含むモーダルフォームを私の電子メールに送信しようとしていますが、モーダルは/ダッシュボード/プロジェクト/＃のmodal1に位置しています
おかげ

# new project function 
@app.route('/dashboard/projects/#modal1form/', methods=["GET","POST"]) 
def new_project(): 
    try: 

     if request.method == "POST": 
      if form.validate() == False: 
       flash('Invalid! All fields are required.') 
       return redirect(url_for('new_project')) 

      else: 
       msg = Message(request.form['name'], sender='request.form["email"]', recipients=['myemail@gmail.com']) 
       msg.body = """ 
       From: %s %s \n 
       %s \n \n %s \n \n %s \n %s \n 
       %s 
       """ % (request.form['wtype', 'wpack', 'bts', 'fts', 'comments']) 
       mail.send(msg) 

       flash('Congratulations! A new project has been submitted.') 
       gc.collect() 
       return render_template('dashboardProjects.html') 

     elif request.method == 'GET': 
      return render_template("dashboardProjects.html") 

    except Exception as e: 
     return(str(e)) 

モーダルフォーム： - ノート

form = modal1form(request.form) 

いただきました！ここで間違っていないことを確認：「エラーが、私は、この関数内の行を使用してみましたので、

<div id="modal1" class="modal fade"> 

    <form method="post" action="{{ url_for('new_project') }}" role="form" id="modal1form" name="modal1form"> 
     <div class="form-group text-center"> 
     <label for="name" class="control-label text-center"> Name </label> 
      <input type="text" class="form-control" name="name" id="name" placeholder="Your Name"> 
     </div> 
     <div class="form-group text-center"> 
     <label for="email" class="text-center"> Email Address </label> 
     <input type="email" class="form-control" name="email" id="email" placeholder="Your Email"> 
     </div> 

<div class="col-md-3 col-md-offset-1">   
       <div class="form-group"> <br> 
       <label for="wtype"> Website Type </label> <br> 
     <h5 class="form-check-inline"> 
      <input class="form-check-input" type="checkbox" name="wtype" id="wtype1" value="Static"> Static 
     </h5> 
     <h5 class="form-check-inline"> 
      <input class="form-check-input" type="checkbox" name="wtype" id="wtype2" value="Blog"> Blog 
     </h5> 
       </div> 
</div>    
     <br>  

<div class="col-md-4 col-md-offset-1"> 
        <div class="form-group"> 
     <label for="wpack"> Website Package </label> <br> 
     <h5 class="form-check-inline"> 
      <input class="form-check-input" name="wpack" type="radio" id="wpack2" value="Blog"> Basic 
     </h5> 
     <h5 class="form-check-inline"> 
      <input class="form-check-input" name="wpack" type="radio" id="wpack3" value="Ecommerce"> Standard <br> 
     </h5>  
        </div> 
</div> 

      <li class="dropdown pull-right list-unstyled" aria-expanded="false" style="position: top;"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" style="font-size: 14px;"> <span class="caret"></span> <label for="template"> <i class="fa fa-cube"></i> Template </label> </a> 
      <ul class="dropdown-menu list-unstyled"> 
     <li><h5 class="text-center"> <i class="fa fa-cubes"></i> Templates</h5></li> 
    <li><a href="#" class="small" data-value="Basic Template1" tabIndex="-1"><input name="bts" type="radio"/>&nbsp;Basic Template 1</a></li> 
    <li><a href="#" class="small" data-value="Basic Template2" tabIndex="-1"><input name="bts" type="radio"/>&nbsp;Basic Template 2</a></li> 
        <li role="separator" class="divider"></li> 
    <li><a href="#" class="small" data-value="Footer 1" tabIndex="-1"><input name="fts" type="radio"/>&nbsp; Footer 1</a></li> 

       </ul> 
       </li> 
</div> 

    <div class="form-group text-center"> <br> 
     <label for="comments"> Other Details </label> 
     <textarea name="comments" class="form-control" id="comments" placeholder="Additional comments, ideas, requests, questions?"></textarea> 
     <p class="help-block"> </p> 
    </div> 
    </form> 

    </div>  
     <div class="modal-footer brick"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
     <button type="submit" class="btn btn-success" form="modal1form">Submit</button> 
     </div> 

Answer 1

ERROR 1：フォームはあなたがフラスコ-WTFを使用する場合は、フォームを作成する必要があります

が定義されていない、このような：

from flask import Flask, render_template 
from flask_wtf import FlaskForm 
from wtforms import StringField, SubmitField 
from wtforms.validators import DateRrequired 

app = Flask(__name__) 
app.config['SECRET_KEY'] = 'a very secret string' 

class MyForm(FlaskForm): 
    name = StringForm('Your Name', validators=[DataRequired()]) 
    submit = SubmitField() 

app.route('/', methods=['GET', 'POST']) 
def index(): 
    form = MyForm() 
    if form.validate_on_submit(): 
     name = form.name.data 
     ... 
    return render_template('index.html', form=form) 

次に、あなたがする必要がありますHTMLテンプレートでフォームをレンダリングします。

<form method="post"> 
{{ form.name() }} 
{{ form.submit() }} 
</form> 

ERROR 2：400不正な要求フラスコ内の

あなたがrequest.form['name']でフォームデータを取得する場合、あなたは400エラーを取得する理由です、この入力が値を持っていることを確認する必要があります。代わりにrequest.form.get('name', default_value)を使用することをお勧めします.2番目の引数としてデフォルト値を設定すると、400のエラーを回避できます。

詳細： flask.pocoo.org/docs/0.11/patterns/wtforms

それはあなたを助けることを願っています。

多分ERROR 3：ブートストラップモーダル

あなたはexample.com#MyModalのように、アンカー名を持つモーダルを開くことができないが、他のモーダルプラグインすることができます。これについて私の答えはanother questionでチェックしてください。